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

相关推荐
化作繁星3 分钟前
vue3项目图片压缩+rem+自动重启等plugin使用与打包配置
前端·vue·vite
u01040583621 分钟前
构建可扩展的Java Web应用架构
java·前端·架构
swimxu1 小时前
npm 淘宝镜像证书过期,错误信息 Could not retrieve https://npm.taobao.org/mirrors/node/latest
前端·npm·node.js
qq_332394201 小时前
pnpm的坑
前端·vue·pnpm
雾岛听风来1 小时前
前端开发 如何高效落地 Design Token
前端
不如吃茶去1 小时前
一文搞懂React Hooks闭包问题
前端·javascript·react.js
alwn1 小时前
新知识get,vue3是如何实现在style中使用响应式变量?
前端
来之梦2 小时前
uniapp中 uni.previewImage用法
前端·javascript·uni-app
野猪佩奇0072 小时前
uni-app使用ucharts地图,自定义Tooltip鼠标悬浮显示内容并且根据@getIndex点击事件获取点击的地区下标和地区名
前端·javascript·vue.js·uni-app·echarts·ucharts
生活、追梦者2 小时前
html+css+JavaScript 实现两个输入框的反转动画
javascript·css·html