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

相关推荐
用户7678797737321 分钟前
后端转全栈之Next.js 路由系统App Router
前端·next.js
OEC小胖胖2 分钟前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
薛定谔的算法12 分钟前
JavaScript栈的实现与应用:从基础到实战
前端·javascript·算法
深圳外环高速16 分钟前
React 受控组件如何模拟用户输入
前端·react.js
土了个豆子的17 分钟前
03.缓存池
开发语言·前端·缓存·visualstudio·c#
手握风云-32 分钟前
JavaEE 进阶第四期:开启前端入门之旅(四)
前端
魔云连洲37 分钟前
React中的合成事件
前端·javascript·react.js
六月的可乐1 小时前
【干货推荐】AI助理前端UI组件-悬浮球组件
前端·人工智能·ui
呼啦啦呼_1 小时前
Echarts自定义地图显示区域,显示街道学校等区域,对原有区域拆分
前端