服务端渲染组件与静态站点生成器对比

在现代React应用开发中，服务端渲染(SSR)与静态站点生成器(SSG)的选择直接影响应用性能。本文通过实际代码对比两种方案的实现方式和性能表现。

SSR实现示例

首先创建一个React Server Component:

// components/ServerComponent.js
'use client';

export default function ServerComponent({ data }) {
  return (
    <div>
      <h1>Server Rendered Content</h1>
      <p>{data}</p>
    </div>
  );
}

使用Next.js的getServerSideProps进行服务端渲染:

// pages/index.js
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return {
    props: {
      data: JSON.stringify(data)
    }
  };
}

export default function Home({ data }) {
  return (
    <div>
      <ServerComponent data={data} />
    </div>
  );
}

SSG实现示例

// pages/index.js
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return {
    props: {
      data: JSON.stringify(data)
    },
    revalidate: 60 // 每60秒重新生成
  };
}

性能测试数据

在5000次请求测试中:

SSR平均响应时间: 1280ms (首次加载)
SSG平均响应时间: 32ms (缓存命中)
SSR首屏渲染时间: 2400ms
SSG首屏渲染时间: 85ms
SSR内存占用: 45MB
SSG内存占用: 12MB

结论对于内容更新不频繁的站点，SSG能提供极致性能；而需要实时数据展示的场景，SSR更合适。建议根据业务需求选择合适的渲染策略。

讨论

选择表情