[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"

相关推荐
CnLiang几秒前
React Compiler Plugin
前端·react.js
willxiao1 分钟前
js 单例模式 6 种实现方式
javascript·设计模式
一只爱吃糖的小羊8 分钟前
React 19 生命周期:从入门到实战的完整指南
前端·react.js
乔伊酱11 分钟前
Bean Searcher 遇“鬼”记:为何我的查询条件偷偷跑进了 HAVING?
java·前端·orm
uu_code00714 分钟前
字节磨皮算法详解
前端
HashTang16 分钟前
【AI 编程实战】第 2 篇:让 AI 成为你的前端架构师 - UniApp + Vue3 项目初始化
前端·vue.js·ai编程
白中白1213824 分钟前
Vue系列-1
前端·javascript·vue.js
dorisrv26 分钟前
Next.js 16 自定义 SVG Icon 组件实现方案 🎨
前端
用户新1 小时前
五万字沥血事件 深度学习 事件 循环 事件传播 异步 脱离新手区 成为事件达人
前端·javascript·事件·event loop
w2sfot1 小时前
JS代码压缩
前端·javascript·html