Next.js服务器端渲染(SSR)[编辑 | 编辑源代码]

服务器端渲染（Server-Side Rendering，SSR）是Next.js的核心特性之一，它允许在服务器上生成完整的HTML页面，再将其发送到客户端。这种方式能够提升首屏加载速度、改善SEO，并确保动态内容在服务端完成渲染后直接呈现给用户。

基本概念[编辑 | 编辑源代码]

SSR的工作原理是：当用户请求页面时，服务器会执行React组件的渲染逻辑，生成完整的HTML结构，再将其发送给浏览器。与客户端渲染（CSR）不同，SSR的页面在到达浏览器时已经是可交互的静态内容。

与传统CSR的区别[编辑 | 编辑源代码]

CSR：浏览器下载空HTML骨架后，通过JavaScript动态填充内容（可能导致"白屏"问题）。
SSR：服务器返回完整渲染的HTML，浏览器直接显示（首屏更快，SEO友好）。

数学表达[编辑 | 编辑源代码]

SSR的渲染延迟可表示为： $T_{SSR} = T_{server} + T_{network}$ 其中：

$T_{server}$ 是服务器渲染时间
$T_{network}$ 是网络传输时间

实现方式[编辑 | 编辑源代码]

Next.js通过getServerSideProps函数实现SSR。该函数在每次页面请求时运行，返回的数据将作为props传递给页面组件。

基础示例[编辑 | 编辑源代码]

// pages/product/[id].js
export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return {
    props: { product }, // 将作为props传递给页面组件
  };
}

function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default ProductPage;

执行流程[编辑 | 编辑源代码]

使用场景[编辑 | 编辑源代码]

SSR特别适合以下情况： 1. SEO关键页面：搜索引擎可以直接抓取渲染后的内容 2. 动态个性化内容：如用户仪表盘、实时数据展示 3. 首屏性能敏感场景：新闻网站、电商产品页

电商案例[编辑 | 编辑源代码]

// pages/checkout.js
export async function getServerSideProps({ req }) {
  const userAgent = req.headers['user-agent'];
  const isMobile = /mobile/i.test(userAgent);

  const res = await fetch('https://api.store.com/featured-products');
  const products = await res.json();

  return {
    props: {
      isMobile,
      products,
    },
  };
}

function CheckoutPage({ isMobile, products }) {
  return (
    <div className={isMobile ? 'mobile-layout' : 'desktop-layout'}>
      <h2>推荐商品</h2>
      <ProductList products={products} />
    </div>
  );
}

高级主题[编辑 | 编辑源代码]

性能优化[编辑 | 编辑源代码]

使用res.setHeader('Cache-Control', 's-maxage=10')设置边缘缓存
避免在getServerSideProps中进行复杂计算
考虑使用流式SSR（React 18+特性）

错误处理[编辑 | 编辑源代码]

export async function getServerSideProps() {
  try {
    const data = await fetchData();
    return { props: { data } };
  } catch (error) {
    return {
      notFound: true, // 返回404页面
      // 或重定向
      // redirect: { destination: '/error', permanent: false }
    };
  }
}

限制与注意事项[编辑 | 编辑源代码]

每次请求都会执行getServerSideProps，不适合高流量页面
需要Node.js服务器环境（不能纯静态部署）
比静态生成(SSG)消耗更多服务器资源

总结[编辑 | 编辑源代码]

Next.js的SSR提供了强大的动态内容渲染能力，特别适合需要实时数据或个性化内容的场景。通过getServerSideProps，开发者可以轻松获取请求时数据并生成完整HTML，同时保持React的交互特性。对于SEO敏感或首屏性能关键的应用，SSR是理想的选择。