Next.js中的两种预渲染机制区别

概念

Static Site Generation (SSG) : 在编译时生成静态 HTML

SSR（Server-Side Rendering）: 用户请求到来时动态生成 HTML

静态路由

静态路由通过文件规范来约定，pages目录下的js文件都认为是路由（每个静态路由对应一个页面文件），例如：

pages/index.js → /
pages/blog/index.js → /blog
pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

动态路由

动态路由也要在pages目录下创建文件，只是文件名有些不同寻常：

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)

开启增量更新

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // 设置有效期，开启ISR
    revalidate: 1, // In seconds
  }
}