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

相关推荐
用户6000718191016 小时前
【翻译】用生成器实现可续充队列
前端
少云清16 小时前
【UI自动化测试】4_web自动化测试 _元素定位(重点)
前端·web前端自动化
若丶相见16 小时前
腾讯云完整部署方案:CODING + CI/CD + Docker + Nginx + K8s 扩展
前端·后端
比奇堡鱼贩17 小时前
python第五次作业
开发语言·前端·python
半兽先生17 小时前
使用 retire.js 自动检测前端 JavaScript 库漏洞
开发语言·前端·javascript
扶苏100217 小时前
详解Vue3的自定义 Hooks
前端·javascript·vue.js
二级小助手17 小时前
26年计算机二级web考试介绍【内附真题】
前端·计算机二级·全国计算机二级·web二级·二级web·前端二级·全国计算机web二级
专注VB编程开发20年18 小时前
WebView2 处理跨域访问限制,Frame脚本执行,难度比CEF大10倍
前端·javascript·.net
CHANG_THE_WORLD19 小时前
指针入门一
java·前端·网络
摸鱼仙人~19 小时前
主流前端「语言/技术 → 主流框架 → 组件库生态 → 适用场景」解析
前端