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

相关推荐
北城笑笑2 分钟前
Vue 100 ,Metaspace memory lack Error( 元空间内存不足 )
java·前端·javascript·vue
谏书稀3 分钟前
vue项目(pnpm)迁移到无网环境开发
前端·javascript·vue.js
Han.miracle8 分钟前
Spring IoC 与 DI 核心知识点综合测试题
java·前端·数据库
-杨豫10 分钟前
JavaScript入门到精通全套资料,以及核心进阶ES6语法,API,js高级等基础知识和实战教程
开发语言·javascript·es6
im_AMBER19 分钟前
react-i18next 国际化支持
前端·react.js·前端框架
文心快码BaiduComate21 分钟前
Comate 3月全新升级:全新Plan模式、Explore Subagent深度检索能力增强
前端·后端·程序员
Lsx_22 分钟前
前端发版后页面白屏?一套解决用户停留旧页面问题的完整方案
前端·javascript·掘金·日新计划
方安乐23 分钟前
pnpm与npm混用为什么会报错?
前端·npm·node.js
什么时候星期五26 分钟前
node版本升级后,项目跑不起来
前端·node.js
Forever7_27 分钟前
扫码枪卡顿有效解决方案
前端