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

相关推荐
hxjhnct13 小时前
JavaScript 的 new会发生什么
开发语言·javascript
狗都不学爬虫_13 小时前
JS逆向 - 最新版某某安全中心滑块验证(wasm设备指纹)
javascript·爬虫·python·网络爬虫·wasm
运筹vivo@13 小时前
攻防世界:Web_php_unserialize
前端·web安全·php
Jiangnan_Cai13 小时前
【Electron】Windows 下打包遇到 dist/unpacked 文件内 electron.exe 文件缺失问题
前端·javascript·electron
自不量力的A同学13 小时前
Electron 40.0.0 发布,跨平台桌面应用开发工具
前端·javascript·electron
Charlie_lll13 小时前
学习Three.js–材质(Material)
前端·three.js
Kratzdisteln13 小时前
【1902】预先生成完整的树状PPT结构
java·前端·powerpoint
softshow102613 小时前
html2canvas + jspdf实现页面导出成pdf
开发语言·javascript·pdf
深耕AI14 小时前
【wordpress系列教程】05 文章分类与标签
前端
摘星编程14 小时前
React Native for OpenHarmony 实战:StyleSheet 样式表优化
javascript·react native·react.js