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