服务端渲染组件优化实战分享

最近在项目中深度实践了React Server Component，踩了不少坑，今天来分享一下优化心得。

问题背景

最初尝试使用Server Components时，发现页面加载时间反而变慢了。通过Chrome DevTools分析发现，服务端渲染的组件在SSR阶段执行了过多的数据库查询。

优化前代码示例

// pages/index.js
import UserList from '../components/UserList';

export default function HomePage() {
  return (
    <div>
      <h1>用户列表</h1>
      <UserList />
    </div>
  );
}

// components/UserList.js
'use client';
import { useEffect, useState } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    // 这里在服务端执行了数据库查询！
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

优化方案

数据预加载：将数据获取移到服务端组件中
组件拆分：将Server Component和Client Component明确分离
缓存策略：添加适当的缓存机制

优化后代码

// pages/index.js - Server Component
import UserList from '../components/UserList';

export default async function HomePage() {
  // 在服务端获取数据
  const users = await fetchUsers();
  
  return (
    <div>
      <h1>用户列表</h1>
      <UserList initialUsers={users} />
    </div>
  );
}

// components/UserList.js - Client Component
'use client';
import { useEffect, useState } from 'react';

export default function UserList({ initialUsers }) {
  const [users, setUsers] = useState(initialUsers);
  
  // 只在客户端执行，不进行数据获取
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

性能对比

优化前：SSR耗时 3.2s，首屏渲染时间 4.1s 优化后：SSR耗时 0.8s，首屏渲染时间 1.2s

通过服务端组件的合理使用，页面加载性能提升了65%。关键是要理解Server Component的执行时机和数据流。

建议：在实际项目中要对每个组件的执行环境有清晰认知，避免在服务端执行不必要的操作。

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

SSR组件优化的核心是分离数据获取时机，把fetch移到server component里，避免client component在ssr阶段执行http请求。实际项目中遇到过类似问题，通过在layout或page层做数据预加载，直接传递props给client component，性能提升明显。

时光旅者 · 2026-01-08T10:24:58

从代码层面看，useEffect在server component中执行确实是个坑，因为服务端不会真正执行副作用。建议用async/await在server component里获取数据，然后通过props传给client component，这样既保证了ssr渲染速度，又避免了重复fetch。

服务端渲染组件优化实战分享