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

相关推荐
独立开阀者_FwtCoder几秒前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士1 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明1 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金920146 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius7 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku8 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄12 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙13 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员15 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特16 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范