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其中很小的一部分后面会持续的输出其他东西~

相关推荐
G等你下课2 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥2 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe10103 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋5 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe10106 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端
爱编程的喵7 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业