Next.js AppRouter入门教程

在Next13.4以后官方开始默认使用了AppRouter。NextJs使用了React的canary中的use client 和use server来分割当前组件时处于服务端或者客户端渲染的组件。在这篇文章我会讲Next服务端组件渲染数据请求的一些个人理解。

App router中默认组件是使用的服务端渲染

服务端组件 目前提供了三种策略 :Static Rendering (静态渲染,默认使用 ),Dynamic Rendering(动态渲染),Streaming(流式渲染)。这三种策略是却决你使用了NextJs的那些Api在打包时可以看见你那些组件使用了那种策略。

由于服务端渲染是在服务器渲染完成,所以使用时会有一些限制,可参考下面官方提供的图来思考应该如何划分你的组件。简单来说就是服务端组件无法使用React Hook和浏览器的Api。

1.Static Rendering(默认使用)

优点:在打包时就渲染好了页面,所以用户访问速度快。

缺点:因为是在打包时就渲染好了,所以页面如果是需要经常变动的就不适用。

2.Dynamic Rendering

优点:在用户进入页面时每次都会在服务端渲染然后发给用户。

缺点:访问量大会消耗较多的服务器资源。

3.Streaming

优点:可以将一个页面内的服务器渲染组件进行一个分割,提高用户体验。

数据请求

因为NextJs对fetch进行了处理,服务端组件 在使用fetch请求数据时默认会对数据进行**强制缓存,**但是也提供了属性来帮你做调整。

force-cache(这是默认属性强制缓存数据,你可以不填。

php 复制代码
// 'force-cache' 
fetch('https://...', { cache: 'force-cache' })

no-store(不缓存数据,每次都重新获取数据渲染页面

php 复制代码
fetch('https://...', { cache: 'no-store' })

revalidate(ISR增量渲染**)**

因为ISR页面在访问的时候会先发一份页面给用户,然后在检测是否过期,如果过期就重新渲染一份下一次使用。

所以他可以解决一些问题:假设你的页面是Static Rendering 或者Dynamic Rendering

但是你某个点又想更新数据你就可以根据时间做调整。

javascript 复制代码
// ISR 每 10 秒重新获取一次
export default async function Home() {
  const data = await fetch("https://api.github.com/repos/vercel/next.js", {
    next: {
      revalidate: 10,
    },
  }).then((res) => res.json());
  return <div>{data.id}
}

最后

以上内容是结合官方文档的一些个人看法,有不对和不足的地方希望指出。这只是NextJs其中很小的一部分后面会持续的输出其他东西~

相关推荐
文心快码BaiduComate18 分钟前
文心快码3.5S实测插件开发,Architect模式令人惊艳
前端·后端·架构
Kimser23 分钟前
基于 VxeTable 的高级表格选择组件
前端·vue.js
摸着石头过河的石头26 分钟前
JavaScript 防抖与节流:提升应用性能的两大利器
前端·javascript
酸菜土狗28 分钟前
让 ECharts 图表跟随容器自动放大缩小
前端
_大学牲32 分钟前
FuncAvatar: 你的头像氛围感神器 🤥🤥🤥
前端·javascript·程序员
葡萄城技术团队42 分钟前
SpreadJS 性能飙升秘籍:底层优化技术深度拆解
前端
brzhang43 分钟前
我且问你,如果有人用 AI 抄你的产品,爱卿又当如何应对?
前端·后端·架构
533_1 小时前
[element-ui] el-tree 组件鼠标双击事件
前端·javascript·vue.js
KIKIiiiiiiii1 小时前
微信个人号开发中如何高效实现API二次开发
java·前端·python·微信
日月之行_1 小时前
Vite+:企业级前端构建的新选择
前端