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

相关推荐
天蓝色的鱼鱼12 小时前
关于 CSS 你可能不知道的属性,但关键时刻很有用
前端·css
泯泷13 小时前
第 2 篇:设计第一套字节码:Opcode、Instruction 与 Constant Pool
前端·javascript·安全
妙码生花13 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十五):优化细节、网络请求封装
前端·后端·ai编程
泯泷13 小时前
第 1 篇:从 1 + 2 开始:亲手写出第一台 JSVM
前端·javascript·安全
团团崽_七分甜13 小时前
Spring Boot 核心知识点总结
前端
lichenyang45314 小时前
从一个按钮开始,理解 ASCF 框架到底在做什么
前端
古夕14 小时前
第三方 SSO 接入实践:redirect_uri 编码、回调一致性与跨项目联调
前端·vue.js
朦胧之14 小时前
页面白屏卡住排查方法
前端·javascript
用户5936087414014 小时前
Playwright 黑魔法:用 ClipboardEvent 绕过 React 富文本编辑器
前端
石山岭15 小时前
自己动手写了一个 Android 虚拟定位 App:GPSSimulate 技术实
android·前端