当前位置：首页 > 文章列表 > 文章 > 前端 > 何时在 Nextjs 中使用 SSR 和 SSG

何时在 Nextjs 中使用 SSR 和 SSG

2025-01-15 15:39:33 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《何时在 Nextjs 中使用 SSR 和 SSG》，聊聊，希望可以帮助到正在努力赚钱的你。

服务器端渲染 (SSR) 和 静态站点生成 (SSG) 是 Next.js 提供的两种强大的页面渲染模式，选择哪种模式取决于您的应用需求。

SSR (服务器端渲染):

SSR 在每次用户请求页面时，都会在服务器端动态生成 HTML。这意味着每次访问页面，服务器都会获取最新数据并渲染页面，然后将完整的 HTML 发送给客户端浏览器。

SSR 的优点在于内容始终是最新的，非常适合需要实时数据的应用，例如：

动态内容频繁更新的网站
需要个性化内容的应用 (例如，基于用户登录状态显示不同的内容)
依赖于实时数据库或 API 的应用

SSR 的缺点是服务器端处理开销较大，可能导致页面加载速度较慢。

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 }, // 传递数据到页面组件
  };
}

function Page({ data }) {
  return {data.content};
}
export default Page;

SSG (静态站点生成):

SSG 在构建时 (例如，执行 next build 命令时) 预先渲染所有页面，并将生成的静态 HTML 文件存储在服务器上。当用户访问页面时，服务器直接提供这些预渲染的静态文件，无需任何服务器端处理。

SSG 的优点在于速度极快，因为页面直接从服务器提供静态文件，无需等待服务器端渲染。这非常适合内容变化不频繁的应用，例如：

博客文章
营销页面
产品目录

SSG 的缺点是内容不是实时的，需要手动触发重新构建才能更新内容。可以使用 revalidate 选项在后台定期重新生成页面，以确保内容的及时更新。

SSG 带有重新验证功能的时间线示例 (revalidate: 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 },
    // 可选：每 60 秒重新生成页面
    revalidate: 60,
  };
}

function BlogPage({ posts }) {
  return (
    
      {posts.map(post => (
        {post.title}
      ))}
    
  );
}

总结:

特性	SSR	SSG
渲染时机	每次请求时	构建时
内容更新	实时	构建时或重新验证时
速度	较慢	极快
适用场景	实时数据、个性化内容	静态内容、内容更新频率低
缓存	不适用，每次请求都生成新页面	适用，直接提供静态文件