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页已经变成了动态页,时间也会跟着刷新改变。