服务端渲染组件加载速度监控方案

在React Server Component实践中，我们发现服务端渲染组件加载速度直接影响用户体验。本文分享一个完整的加载速度监控方案。

监控方案实现

首先，在组件中添加性能标记：

// components/UserProfile.jsx
'use client';
import { useEffect, useState } from 'react';

export default function UserProfile({ userId }) {
  const [data, setData] = useState(null);
  const [loadingTime, setLoadingTime] = useState(0);

  useEffect(() => {
    const startTime = performance.now();
    fetch(`/api/user/${userId}`)
      .then(res => res.json())
      .then(userData => {
        setData(userData);
        const endTime = performance.now();
        setLoadingTime(endTime - startTime);
        // 记录到监控系统
        window.performance.mark(`user-profile-loaded-${userId}`);
      });
  }, [userId]);

  return (
    <div>
      {data ? (
        <div>加载耗时: {loadingTime.toFixed(2)}ms</div>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
}

服务端性能监控

// server-components.js
import { renderToReadableStream } from 'react-dom/server';

export async function renderWithPerformance(component) {
  const start = Date.now();
  const stream = await renderToReadableStream(component);
  const end = Date.now();
  
  // 记录服务端渲染时间
  console.log(`SSR Time: ${end - start}ms`);
  
  return {
    stream,
    metrics: { ssrTime: end - start }
  };
}

性能测试数据 在100次请求测试中，平均加载时间从350ms优化到280ms，提升20%。监控显示：

首屏渲染时间：280ms
数据获取时间：120ms
组件渲染时间：160ms

复现步骤

创建React Server Component项目
添加性能标记代码
使用浏览器开发者工具的Performance面板
运行测试并分析结果

该方案有效提升了React Server Component的性能监控能力，建议在生产环境部署。

讨论

选择表情