Next.js SSR开发中的一些常见性能陷阱与优化路径

/**
 * SSR数据预取与水合一致性修复
 * 设计意图：消除SSR→CSR的数据重复请求，
 * 确保独立请求并行执行，慢速请求不阻塞页面Shell
 */

import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
import { Suspense } from 'react';

// 服务端组件：执行并行数据预取
export default async function BriefingPage() {
  const queryClient = new QueryClient();

  // 并行预取：不互相依赖的请求同时发出
  // Promise.allSettled确保单失败不影响整体
  await Promise.allSettled([
    queryClient.prefetchQuery({
      queryKey: ['weather', 'today'],
      queryFn: () => fetchWeather(),
      staleTime: 60 * 1000,
    }),
    queryClient.prefetchQuery({
      queryKey: ['calendar', 'today'],
      queryFn: () => fetchCalendar(),
      staleTime: 5 * 60 * 1000,
    }),
    queryClient.prefetchQuery({
      queryKey: ['emotion', '7d'],
      queryFn: () => fetchEmotionTrend(),
      staleTime: 5 * 60 * 1000,
    }),
  ]);

  return (
    // HydrationBoundary将SSR数据传递给客户端，
    // useQuery自动从缓存读取，避免重复请求
    <HydrationBoundary state={dehydrate(queryClient)}>
      <main>
        {/* 快速数据直接渲染 */}
        <WeatherWidget />
        <CalendarWidget />
        <EmotionTrend />

        {/* 慢速AI数据通过Suspense隔离，不阻塞Shell */}
        <Suspense fallback={<BriefingSkeleton />}>
          <AIBriefingContent />
        </Suspense>
      </main>
    </HydrationBoundary>
  );
}

// 客户端组件：从hydration缓存直接读取，不发起新请求
'use client';
import { useQuery } from '@tanstack/react-query';

function WeatherWidget() {
  // 首次渲染时数据已存在于HydrationBoundary的缓存中
  // TanStack Query识别出缓存命中，不发网络请求
  const { data, isLoading } = useQuery({
    queryKey: ['weather', 'today'],
    queryFn: fetchWeather,
    staleTime: 60 * 1000,
  });

  if (isLoading) return <WeatherSkeleton />;
  return <div>{/* 渲染天气 */}</div>;
}