编辑“︁Next.js服务器端渲染(SSR)”︁

= Next.js服务器端渲染(SSR) =

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

== 基本概念 ==

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

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

=== 数学表达 ===
SSR的渲染延迟可表示为：
<math>T_{\text{SSR}} = T_{\text{server}} + T_{\text{network}}</math>
其中：
* <math>T_{\text{server}}</math> 是服务器渲染时间
* <math>T_{\text{network}}</math> 是网络传输时间

== 实现方式 ==

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

=== 基础示例 ===
<syntaxhighlight lang="javascript">
// 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;
</syntaxhighlight>

=== 执行流程 ===
<mermaid>
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: 发起页面请求
    Server->>Database: 获取数据
    Database-->>Server: 返回数据
    Server->>Server: 执行getServerSideProps
    Server->>Server: 渲染React组件
    Server-->>Client: 返回完整HTML
    Client->>Client: 水合(Hydration)
</mermaid>

== 使用场景 ==

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

=== 电商案例 ===
<syntaxhighlight lang="javascript">
// 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>
  );
}
</syntaxhighlight>

== 高级主题 ==

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

=== 错误处理 ===
<syntaxhighlight lang="javascript">
export async function getServerSideProps() {
  try {
    const data = await fetchData();
    return { props: { data } };
  } catch (error) {
    return {
      notFound: true, // 返回404页面
      // 或重定向
      // redirect: { destination: '/error', permanent: false }
    };
  }
}
</syntaxhighlight>

== 限制与注意事项 ==
* 每次请求都会执行<code>getServerSideProps</code>，不适合高流量页面
* 需要Node.js服务器环境（不能纯静态部署）
* 比静态生成(SSG)消耗更多服务器资源

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

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js渲染策略]]