服务端组件资源加载速度基准测试

服务端组件资源加载速度基准测试

最近在实践React Server Component时，发现服务端渲染的资源加载速度存在明显差异。本文记录一次完整的性能基准测试。

测试环境

• React 18.2 + Next.js 13.4
• Node.js 18.15
• 本地开发环境（Intel i7-12700K，32GB RAM）

测试方案

我们对比了三种资源加载方式的性能表现：

// 方式一：服务端直接导入
'use client'
import { useEffect, useState } from 'react'

export default function Component() {
  const [data, setData] = useState(null)
  
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])
  
  return <div>{data?.name}</div>
}

// 方式二：服务端组件直接渲染
'use server'
import { cache } from 'react'

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json())
  return <div>{data.name}</div>
}

// 方式三：服务端组件+缓存
'use server'
import { cache } from 'react'

const getData = cache(async () => {
  const res = await fetch('https://api.example.com/data')
  return res.json()
})

export default async function CachedComponent() {
  const data = await getData()
  return <div>{data.name}</div>
}

测试数据

经过100次请求测试，得到以下结果：

结论

服务端组件的性能提升主要体现在：

• 减少了客户端网络请求
• 避免了客户端渲染开销
• 合理使用缓存可进一步优化

建议在数据获取频繁的场景下优先使用服务端组件。

踩坑提醒： 服务端组件中避免使用useEffect等客户端钩子，否则会破坏服务端渲染优势。