Next.js--- SSR服务端渲染

服务端渲染使用场景

• 官网、门户网站
• 落地页
• 广告页

服务端渲染题外话

• 纯粹做服务端渲染，也有很大问题，有些内容确实需要前端渲染
  • canvas
  • 事件绑定
  • 层叠样式表解析
  • htmldom、cssom结合

SSR（服务端渲染）

SSR工作流程

• 1:客户端发起请求
• 2:服务器执行getServerSideProps获取数据
• 3:服务端渲染页面
• 4:服务端发送HTML到客户端
• 5:客户端执行JS，进行水合，页面交互 原理：服务端渲染在服务器上生成完整的HTML，发送到客户端，客户端接收后进行“水合”，添加交互性。

Hydration(水合)

水合：将服务端渲染的静态HTML与客户端的JS逻辑结合在一起。

• getStaticProps(静态页面生成SSG)：构建的时候生成页面
• getStaticPaths(静态页面生成SSG)：根据构建内容生成动态路由
• getServerSideprops(服务端渲染SSR)：在每个请求中在服务端获取数据渲染页面

SSG（静态站点生成）

ISR（增量静态再生）

Next.js---SSR

在Next.js 中，SSR 的实现主要依赖于页面级别的 getServerSideProps 方法。getServerSideProps 是一个异步函数，用于在服务端获取数据并将其通过 props 传递给页面组件。

实战案例：

// pages/product/[id].js
export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return { 
    props: { product }, // 数据将传递给页面组件
  };
}

export default function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}