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

相关推荐
这是个栗子11 分钟前
TypeScript(三)
前端·javascript·typescript·react
kvo7f2JTy16 分钟前
基于机器学习算法的web入侵检测系统设计与实现
前端·算法·机器学习
北风toto18 分钟前
前端CSS样式详细笔记
前端·css·笔记
nanfeiyan28 分钟前
git commit
前端
前端精髓3 小时前
移除 Effect 依赖
前端·javascript·react.js
码云之上3 小时前
从一个截图函数到一个 npm 包——pdf-snapshot 的诞生记
前端·node.js·github
码事漫谈4 小时前
AI提效,到底能强到什么程度?
前端·后端
IT_陈寒4 小时前
React hooks依赖数组这个坑差点把我埋了
前端·人工智能·后端
阿祖zu4 小时前
内容创作 AI 透明化声明倡议与项目开源
前端·后端·github
lpfasd1234 小时前
TypeScript + Cloudflare 全家桶部署项目全流程
前端·javascript·typescript