服务端渲染组件资源加载优化方案

踩坑记录

最近在实践React Server Component时，发现SSR性能瓶颈主要集中在资源加载上。最初尝试直接在Server Component中import图片资源，结果导致服务端渲染时间从200ms飙升到1500ms。

问题分析

// ❌ 错误做法
'use server'
import { Suspense } from 'react'

export default function ProductCard({ productId }) {
  // 这里会阻塞服务端渲染
  const productImage = require(`@/assets/images/${productId}.jpg`)
  
  return (
    <div>
      <img src={productImage} alt="product" />
    </div>
  )
}

解决方案

1. 动态导入优化

// ✅ 正确做法
'use server'
import { Suspense } from 'react'

async function ProductImage({ productId }) {
  const imageModule = await import(`@/assets/images/${productId}.jpg`)
  return <img src={imageModule.default} alt="product" />
}

export default function ProductCard({ productId }) {
  return (
    <Suspense fallback="加载中...">
      <ProductImage productId={productId} />
    </Suspense>
  )
}

2. 预加载策略

// 在layout.tsx中预加载关键资源
'use client'
import { useEffect } from 'react'

export default function RootLayout({ children }) {
  useEffect(() => {
    // 预加载首屏关键图片
    const preloadImages = [
      '/images/hero.jpg',
      '/images/banner.jpg'
    ]
    
    preloadImages.forEach(src => {
      const img = new Image()
      img.src = src
    })
  }, [])
  
  return <>{children}</>
}

性能测试数据

实践建议

• 优先使用动态import而非静态import
• 合理使用Suspense进行组件级加载
• 在客户端预加载首屏关键资源
• 使用React.lazy配合代码分割

避免在Server Component中直接引入大体积资源，否则会严重影响SSR性能。