什么是服务器端渲染？

📌 服务器端渲染（SSR）是指在服务器上生成完整的 HTML 页面，再将其发送到客户端。这种方式能提升首屏加载速度与 SEO 优化效果，是 Next.js 的核心特性之一。

Next.js 的 SSR 支持

  • 自动 SSR：通过 getServerSideProps 函数在服务器动态获取数据
  • 静态生成（SSG）：使用 getStaticProps 预先生成页面内容
  • 混合模式：结合 SSR 与 SSG 的灵活方案

实现 SSR 的步骤 📌

  1. 创建页面文件
    在 pages 目录下新建文件，例如 pages/index.js
  2. 定义数据获取函数 
    export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}
  3. 渲染页面内容 
    export default function Home({ data }) {
  return (
    <div>
      <h1>欢迎使用 Next.js</h1>
      <p>当前数据：{data.message}</p>
    </div>
  );
}

优势与注意事项 📈

优点 说明
⚡ 快速首屏 服务器直接生成 HTML，减少客户端渲染时间
🔍 更好 SEO 搜索引擎可直接抓取完整内容
🔄 可缓存 静态生成页面可被 CDN 缓存

⚠️ 注意：确保数据获取函数不会导致无限循环或阻塞服务器性能

扩展阅读 📚

Next_js_SSR