何时在 Next.js 中使用 SSR 和 SSG

SSR（服务器端渲染）：

在每次向服务器发出请求时运行。
每次用户访问页面时，服务器都会获取数据，呈现 HTML，然后将其发送到客户端。
这确保了内容始终是新鲜的，但由于服务器端处理的开销，它可能会变慢。

SSR 时间线示例：

请求1：用户A访问→服务器获取数据，动态生成页面，并响应。

请求2：用户B访问→服务器再次取数据，动态生成页面，并响应。

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data }, // Will be passed to the page component as props
  }
}

function Page({ data }) {
  return <div>{data. Content}</div>
}
export default Page;

SSG（静态站点生成）：

在构建时运行（当您执行下一个构建时）。
HTML 和数据被预渲染并保存为静态文件。这些文件直接提供给用户，速度超级快。

可选：如果您使用 revalidate，Next.js 将在指定的时间间隔后在后台重建页面，确保更新的内容可用。
具有重新验证功能的 SSG 时间线示例：60：

构建时间：页面使用构建时可用的数据进行预渲染。

请求 1：（构建后）：用户 A 访问 → 提供静态 HTML。

后台重新生成（60 秒后）：Next.js 获取新数据并重新生成页面。

请求 2：（重新生成后）：用户 B 访问 → 提供更新的静态 HTML。

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

  return {
    props: { 
      posts 
    },
    // Optional: Regenerate the page at most once every 60 seconds
    revalidate: 60 
  }
}

function BlogPage({ posts }) {
  return (
    <div>
      {posts. Map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

SSR： 获取新数据并根据每个请求生成页面。

SSG： 在构建时（或在计划的重新验证间隔期间）预渲染页面一次，并向所有用户提供相同的预构建页面，直到重新生成。

在以下情况下使用 SSR：

您需要实时、最新的内容（例如仪表板、用户特定数据）。
内容频繁变化，无法有效缓存。

在以下情况下使用 SSG：

内容不经常更改（例如博客文章、营销页面）。
速度和性能至关重要。

以上是何时在 Next.js 中使用 SSR 和 SSG的详细内容。更多信息请关注PHP中文网其他相关文章！