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

相关推荐
clausliang3 分钟前
实现一个可插入变量的文本框
前端·vue.js
yyongsheng4 分钟前
SpringBoot项目集成easy-es框架
java·服务器·前端
fruge26 分钟前
前端工程化流程搭建与配置优化指南
前端
Aress"41 分钟前
uniapp设置vuex公共值状态管理
javascript·vue.js·uni-app
东芃93941 小时前
uniapp上传blob对象到后台
前端·javascript·uni-app
coding随想1 小时前
救命!网页还在偷偷耗电?浏览器Battery API事件教你精准控电,这5个场景用了都说香
前端
贝西奇谈1 小时前
JavaScript DOM节点操作详解
开发语言·javascript·php
IT_陈寒1 小时前
Redis性能翻倍的5个冷门优化技巧,90%的开发者都不知道第3个!
前端·人工智能·后端
华仔啊2 小时前
无需UI库!50行CSS打造丝滑弹性动效导航栏,拿来即用
前端·css
光影34152 小时前
专利撰写与申请核心要点简报
前端·数据库·php