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

相关推荐
梦幻通灵4 小时前
Edge浏览器好用插件【持续更新】
前端·edge
sTone873754 小时前
Chrome devtools二次开发准备:获取源码和编译
前端·google
龙泉寺天下行走4 小时前
[Powershell入门教程]第4天:模块、脚本编写、错误处理与 .NET 集成
java·服务器·前端
晴天丨4 小时前
Vite:下一代前端构建工具深度解析与实践指南
前端
多来哈米4 小时前
Jenkins配置vue前端项目(最简单的操作)
运维·前端·jenkins
一只叁木Meow4 小时前
Vue scoped CSS 与 Element Plus Drawer 样式失效问题深度解析
前端
用户92426257007314 小时前
Vue 学习笔记:组件通信(Props / 自定义事件)与插槽(Slot)全解析
前端
Zyx20074 小时前
JavaScript 数组:从内存布局到遍历策略的深度解析
javascript
UIUV4 小时前
Ajax 数据请求学习笔记
前端·javascript·代码规范
FogLetter4 小时前
手写useInterval:告别闭包陷阱,玩转React定时器!
前端·react.js