从零开始NEXT.js(七)——静态站点

从零开始NEXT.js(六)——中间件

SSG

当我们在项目中运行npm run build 时，默认情况下会导出为SSG（Static Site Generation）静态站点生成。NEXT.js会自动获取并构建一个主页，就像提供了一个完整的html一样，可以缓存在CDN中。

但当我们在页面上展示了一个会实时更新的数据，例如获取当前时间的函数：

export default async function Home() {
 
  return (
    <main className="flex min flex-col items-center justify-between p-24">
      <div>{Date.now()}</div>

    </main>
  );
}

然后我们运行npm run dev,在每次刷新页面时，页面上的数字会更新。

刷新之后：

这是因为运行npm run dev时，NEXT.js不会呈现一个html页面，而是在每次刷新都重新生成整个页面。

当执行的是npm run start时，呈现的就是静态页面了，这时怎么刷新数字都不会动。

ISR

ISR（Incremental Static Regeneration）增量静态再生，这种方法能帮绕过SSG的静态站点带来的问题。

当数据发生变化，但你不想每次刷新都进行更新，因为可能会引起服务器超载。可以使用一个关键字revalidate去控制。

export const revalidate=5

这相当于设定了一个计时器，每五秒才会对页面的数据进行更新。

可以看到home页仍然是一个静态页面，再运行npm run start时，但是数据可以刷新了，这就是重新验证的工作原理。

SSR

当我们在页面中加入动态路由的东西例如cookies,这会让页面强制变成动态路由SSR（Server Side Rendering）

import { cookies } from "next/headers";


export default async function Home() {
  cookies()
  return (
    <main className="flex min flex-col items-center justify-between p-24">
      <div>{Date.now()}</div>

    </main>
  );
}

重新npm run build 之后，会发现home页已经变成了动态页，时间也会跟着刷新改变。