服务端渲染优化策略

服务端渲染优化策略踩坑记录

最近在做SSR项目优化时踩了不少坑，分享几个实用的优化策略。

1. 避免重复的API请求

最开始遇到的问题是同一个API被调用了多次，通过在服务端添加缓存机制解决：

// 服务端渲染入口文件
const apiCache = new Map()

function fetchWithCache(url, options) {
  const cacheKey = `${url}_${JSON.stringify(options)}`
  if (apiCache.has(cacheKey)) {
    return Promise.resolve(apiCache.get(cacheKey))
  }
  
  return fetch(url, options).then(res => res.json()).then(data => {
    apiCache.set(cacheKey, data)
    return data
  })
}

2. 合理使用React.memo和 useMemo

组件层级过深时，渲染性能会急剧下降。通过添加memo优化：

const OptimizedComponent = React.memo(({ data }) => {
  const processedData = useMemo(() => {
    return data.map(item => processItem(item))
  }, [data])
  
  return <div>{processedData.map(item => <span key={item.id}>{item.name}</span>)}</div>
})

3. 懒加载策略

将非首屏组件延迟加载，避免阻塞首次渲染：

const LazyComponent = React.lazy(() => import('./HeavyComponent'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  )
}

4. 预加载关键资源

通过预加载首屏必需的CSS和JS：

<!-- 在HTML模板中 -->
<link rel="preload" href="/critical.css" as="style">
<link rel="prefetch" href="/next-page.js">

这些优化让页面首次渲染时间从3.2s降低到1.8s，体验提升明显。