如何使用 Next.js 进行服务端渲染（Server-Side Rendering, SSR）

前言

  Next.js 本身就支持 SSR 并提供了一系列内置的方法来简化这个过程。下面将详细介绍如何使用 Next.js 进行 SSR，并提供具体的示例代码。

步骤 1: 创建 Next.js 应用

  首先，你需要安装 Next.js 并创建一个新的项目。如果你还没有安装 Next.js 和 React，请先安装它们：

npm install -g create-next-app
create-next-app my-app
cd my-app
npm run dev

  或者，如果你已经有了一个项目，可以跳过创建新项目的步骤。

步骤 2: 创建页面组件

  Next.js 通过文件系统路由机制来管理页面。每个位于 pages 目录下的文件都会自动成为一个页面。接下来，我们将创建一个简单的页面组件，并使用 SSR 来获取数据。

示例页面组件

  在 pages 目录下创建一个名为 about.js 的文件，并编写以下内容：

// pages/about.js
export async function getServerSideProps(context) {
   
  const res = await fetch('https://api.example.com/about');
  const data = await res.json();

  // 返回页面的初始 props
  return {
    props