Next.js 系列 03：渲染策略

• Next.js 系列 01：为什么使用 Next.js
• Next.js 系列 02：客户端渲染与服务端渲染
• Next.js 系列 03：渲染策略
• Next.js 系列 04：在服务器组件之前
• Next.js 系列 05：什么是服务器组件
• Next.js 系列 06：服务器组件的好处

本系列文章均使用 Next.js 的 App Router，这是未来的趋势。

思考一

在 app/page.tsx 文件下有如下代码，每次刷新页面，时间是否会发生变化?

// app/page.tsx

export default function Home() {
  return <main>{new Date().toLocaleString()}</main>;
}

答案

我想让你先去思考，故把答案折叠起来。

为什么？

对于服务器组件（先不必弄懂服务器组件是什么，后面的篇章我会介绍，现在你只需记住这个名词），当构建生产版本的时候， Next 会尝试找出最佳渲染策略，默认使用静态渲染。如果我们正在做一些构建期间无法计算的事情 （如：读取访问请求的 Cookie，访问请求头等），它会转向动态渲染。

当然，你也可以切换为动态渲染。将以下代码添加到 app/page.tsx 文件中：

// app/page.tsx

export const dynamic = "force-dynamic";

...

注意，该方式仅适用于 Page, Layout，你可以在官方文档中查看。

思考二

思考一中的代码，如果放到动态路由中，刷新页面，时间会发生变化吗？本次不会给出答案，请你自己尝试。

// app/blog/[slug]/page.tsx

type Params = {
  params: { slug: string };
};

export default function Page({ params }: Params) {
  return (
    <div>
      <p>slug: {params.slug}</p>
      <p>{new Date().toLocaleString()}</p>
    </div>
  );
}

下一篇开始，我们将会进入服务器组件的部分，可能会由数个篇幅组成。