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

相关推荐
烟袅1 分钟前
从零开始:前端如何通过 `fetch` 调用 大模型(详解)
前端·javascript·llm
摇滚侠13 分钟前
Vue 项目实战《尚医通》,完成确定挂号业务,笔记46
java·开发语言·javascript·vue.js·笔记
Electrolux19 分钟前
基于WASM的纯前端Office解决方案:在线编辑/导入导出/权限切换(已开源)
前端
合作小小程序员小小店38 分钟前
web网页开发,在线%医院诊断管理%系统,基于Idea,html,css,jQuery,java,jsp,ssh,mysql。
java·前端·css·数据库·jdk·html·intellij-idea
软件技术NINI40 分钟前
html css js网页制作成品——html+css+js5 页 jk制服附源码
javascript·css·html
爱学习的程序媛1 小时前
【Web前端】Vue2与Vue3核心概览与优化对比
前端·javascript·vue.js·typescript
li@h1 小时前
如何在电脑端访问小程序时在胶囊添加一个全屏和缩放功能
前端
aiguangyuan2 小时前
React 18 源码解读(一)
javascript·react·前端开发
LFly_ice2 小时前
学习React-23-React-router
前端·学习·react.js
haofafa2 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化