next.js实现SSR入门

Next.js 是一个基于 React 的框架，支持服务端渲染（Server-Side Rendering，简称 SSR）和静态站点生成（Static Site Generation，简称 SSG）。SSR 是指在服务端生成 HTML 页面后再发送到浏览器，而不是将所有工作交给客户端。这种方式可以提升页面的首屏加载速度并有助于 SEO。

第一部分：next.js实现SSR入门

以下是实现 Next.js 服务端渲染（SSR）的入门教程：

---

1. 初始化 Next.js 项目

安装 Next.js 项目

npx create-next-app@latest my-next-app
# 或者使用 yarn
# yarn create next-app my-next-app
# 或者使用 pnpm
# pnpm create next-app my-next-app

项目初始化完成后，进入项目目录：

cd my-next-app

然后启动开发服务：

npm run dev
# 或
# yarn dev
# 或
# pnpm dev

默认情况下，开发服务器运行在 http://localhost:3000。

---

2. 创建一个页面并实现 SSR

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

示例：创建一个简单的 SSR 页面

1. 在 pages 目录下创建一个新的文件，例如 pages/ssr.js：

// pages/ssr.js

export async function getServerSideProps(context) {
   
   
  // 模拟从 API 或数据库获取数据
  const data = {
   
    message: 'Hello from Server-Side Rendering!' };

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

export default function SSRPage({
    
     data }) {
   
   
  return (
    <