前端架构设计：Server Component模式探索

前端架构设计：Server Component模式探索

最近在项目中尝试了React Server Component，踩了不少坑，分享一下实践心得。

初次尝试

首先创建一个简单的Server Component：

// components/Profile.server.js
'use client';

export default function Profile({ userId }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setUser);
  }, [userId]);
  
  return <div>{user?.name}</div>;
}

遇到的问题

1. 数据获取：Server Component中不能直接使用fetch，需要在Client Component中处理
2. 状态同步：服务端渲染的数据和客户端状态不一致
3. 性能优化：组件缓存策略不当导致重复请求

解决方案

通过自定义Hook封装数据获取逻辑：

// hooks/useUserData.js
'use client';

export function useUserData(userId) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setData);
  }, [userId]);
  
  return data;
}

性能测试

• 传统CSR：首次加载时间1.2s，渲染150ms
• Server Component：首次加载时间0.8s，渲染80ms
• 首屏渲染提升约33%

Server Component确实能带来性能提升，但需要仔细权衡开发复杂度。