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

相关推荐
wenzhangli72 小时前
Ooder A2UI 核心架构深度解析:WEB 拦截层的设计与实现
前端·架构
前端百草阁2 小时前
【前端性能优化全链路指南】从开发编写到构建运行的多维度实践
前端·性能优化
神探小白牙2 小时前
eCharts 多系列柱状图增加背景图
javascript·ecmascript·echarts
女生也可以敲代码2 小时前
AI时代下的50道前端开发面试题:从基础到大模型应用
前端·面试
ZhengEnCi2 小时前
M5-markconv自定义CSS样式指南 📝
前端·css·python
IT_陈寒3 小时前
SpringBoot自动配置的坑差点让我加班到天亮
前端·人工智能·后端
xingpanvip3 小时前
星盘接口开发文档:星相日历接口指南
android·开发语言·前端·css·php·lua
@PHARAOH3 小时前
WHAT - GitLens supercharged 插件
前端
TT模板3 小时前
苹果cms整合西瓜播放器XGplayer插件支持跳过片头尾
前端·html5
Wect4 小时前
React 性能优化精讲
前端·react.js·性能优化