服务端渲染与客户端渲染的核心区别解析

// 性能测试配置示例
const performanceConfig = {
  ssr: {
    firstContentfulPaint: 800, // ms
    timeToInteractive: 1500,   // ms
    speedIndex: 1200,          // ms
    seoScore: 95
  },
  csr: {
    firstContentfulPaint: 2000, // ms
    timeToInteractive: 3000,    // ms
    speedIndex: 2500,           // ms
    seoScore: 45
  }
};

// Next.js支持多种渲染模式
export async function getServerSideProps(context) {
  // 服务端渲染：每次请求都重新生成
  const data = await fetch(`https://api.example.com/data`);
  return {
    props: {
      data: await data.json()
    }
  };
}
 
export async function getStaticProps() {
  // 静态生成：构建时生成，可配合增量静态再生
  const data = await fetch(`https://api.example.com/data`);
  return {
    props: {
      data: await data.json()
    },
    revalidate: 60 // 60秒后重新验证
  };
}

// nuxt.config.js
export default {
  // 全局SSR配置
  ssr: true,
  
  // 页面级渲染模式控制
  pages: {
    '/admin/*': { ssr: false },     // 管理后台使用CSR
    '/product/*': { ssr: true },   // 产品页面使用SSR
    '/blog/*': { ssr: 'static' }   // 博客使用静态生成
  }
}

// TRAE IDE智能识别渲染模式
// 自动补全getServerSideProps等Next.js特定API
export async function getServerSideProps(context) {
  // IDE会提示context对象的可用属性和方法
  const { req, res, query, params } = context;
  
  // 智能错误检测：确保返回格式正确
  return {
    props: {
      // 数据预取逻辑
    }
  };
}

// TRAE IDE支持服务端代码调试
// 可以在服务器端代码中设置断点
export async function getServerSideProps(context) {
  debugger; // IDE会在此处暂停，支持变量检查
  
  const startTime = Date.now();
  const data = await fetchData();
  
  console.log(`Data fetching took ${Date.now() - startTime}ms`);
  
  return { props: { data } };
}

// 建立性能监控基线
const performanceMonitor = {
  // 首屏时间监控
  measureFirstPaint: () => {
    return performance.getEntriesByType('paint')[0]?.startTime;
  },
  
  // 可交互时间监控
  measureTTI: () => {
    return performance.timing.domInteractive - performance.timing.navigationStart;
  }
};

// React 18流式SSR示例
import { renderToPipeableStream } from 'react-dom/server';
 
app.get('/', (req, res) => {
  const stream = renderToPipeableStream(<App />, {
    onShellReady() {
      res.statusCode = 200;
      stream.pipe(res);
    }
  });
});