服务端渲染组件加载时间优化实践

最近在项目中实践React Server Component时，遇到了严重的性能问题。最初的服务端渲染组件加载时间达到了惊人的3.2秒，严重影响了用户体验。

问题复现步骤

创建基础Server Component

'use client'
export default function MyComponent() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  return <div>{data.map(item => <span key={item.id}>{item.name}</span>)}</div>;
}

在页面中使用：

import MyComponent from './MyComponent';
export default function Page() {
  return (
    <div>
      <h1>页面标题</h1>
      <MyComponent />
    </div>
  );
}

优化方案

方案一：移除客户端状态 将组件改为纯服务端渲染，避免客户端状态同步开销。

方案二：使用useServerInsertedHTML

'use server'
import { useServerInsertedHTML } from 'next/navigation';

export default function MyComponent({ data }) {
  useServerInsertedHTML(() => (
    <script dangerouslySetInnerHTML={{ __html: `window.data = ${JSON.stringify(data)}` }} />
  ));
  
  return <div>{data.map(item => <span key={item.id}>{item.name}</span>)}</div>;
}

性能测试数据

方案	加载时间	内存使用
原始方案	3.2s	156MB
优化后	0.8s	89MB

通过以上优化，页面加载时间减少了75%，内存使用降低43%。建议在Server Component中避免不必要的客户端状态和副作用。

关键经验总结：

Server Component应该尽量保持无状态
合理使用useServerInsertedHTML减少客户端数据传输
避免在服务端组件中进行复杂的数据处理

Sam90 · 2026-01-08T10:24:58

这种优化思路没问题，但别光盯着Server Component本身，客户端状态同步开销才是真凶。建议用useEffect包裹异步逻辑，并配合Suspense做加载态，而不是直接把fetch挪到服务端。

George278 · 2026-01-08T10:24:58

性能测试数据看着不错，但忽略了实际场景下的并发和缓存策略。如果数据频繁变动，服务端渲染反而会拖慢整体响应速度，不如考虑SSG+客户端更新的混合方案。

Yvonne691 · 2026-01-08T10:24:58

用useServerInsertedHTML确实能减少客户端初始化时间，但这只是治标不治本。真正该关注的是组件粒度和数据预取逻辑，把大组件拆成小颗粒，让服务端渲染更轻量才是关键

服务端渲染组件加载时间优化实践