[NextJs 14] Summarize data fetching architecture

Introduction

In this article, I am gonna summarize the modes about data fetching in NextJs for better understanding of NextJs.

API Router Mode

Tranditionally,we use fetch or axios tool to request data by HTTP-Request.

This mode, meanwhile, is supposed to offer api to outside world in public.

However, when you use fetch-api in Server Component,that obviously is inapproriate. Because why fecthing api in the same place. In Server Component, we can directly call the function service from server.

Server Component Call Service Mode

In Server Component, we can call the service function from server, at the same time,remain the api ability in public.

Client Component Call Service Mode

In Client Component, we can't call the service function from server directly. because, the service does not exist in Client Side. But, we can continue to use api router mode.

If we want to do this, we should mark service file as "use server"

相关推荐
Renounce1 分钟前
【Android】从早期 MVC 到现代 MVVM 的架构变迁
前端
lbr2 分钟前
uniapp封装图片上传组件,使用v-model双向绑定
前端
拉不动的猪2 分钟前
回顾前端项目打包时--脚本引入时机与环境类型的判断问题
前端·vue.js·面试
比特记忆3 分钟前
Android开发中用到的反射机制
前端
渣哥3 分钟前
还在写繁琐监听器?Spring @EventListener 注解让你代码瞬间简化
javascript·后端·面试
fox_3 分钟前
一次搞懂柯里化:从最简单代码到支持任意函数,这篇让你不再踩参数传递的坑
前端·javascript
Keepreal4965 分钟前
实现一个简单的hello world vs-code插件
前端·javascript·visual studio code
用户458203153177 分钟前
CSS 层叠层 (@layer) 详解:控制样式优先级新方式
前端·css
月弦笙音8 分钟前
【Vue组件】封装组件该考虑的核心点
前端·javascript·vue.js
清风细雨_林木木9 分钟前
HttpOnly 是怎么防止 XSS 攻击的?
前端·xss