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

相关推荐
KenXu1 分钟前
从Vue 到 React:Valtio 让状态管理更熟悉
前端
JS_GGbond4 分钟前
用Canvas和SVG制作简单动画:从零开始的视觉魔法
javascript
努力学习的少女10 分钟前
对SparkRDD的认识
开发语言·前端·javascript
LYFlied15 分钟前
Webpack 深度解析:从原理到工程实践
前端·面试·webpack·vite·编译原理·打包·工程化
苏打水com40 分钟前
第十二篇:Day34-36 前端工程化进阶——从“单人开发”到“团队协作”(对标职场“大型项目协作”需求)
前端·javascript·css·vue.js·html
知了清语41 分钟前
为天地图 JavaScript API v4.0 提供 TypeScript 类型支持 —— tianditu-v4-types 正式发布!
前端
程序员Sunday1 小时前
为什么 AI 明明写后端更爽,但却都网传 AI 取代前端,而不是 AI 取代后端?就离谱...
前端·后端
之恒君1 小时前
React 性能优化(方向)
前端·react.js
coding随想1 小时前
JavaScript Notifications API:告别alert弹窗,开启沉浸式用户体验革命!
开发语言·javascript·ux
钝挫力PROGRAMER1 小时前
Vue中选项式和组合式API的学习
javascript·vue.js