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

文章目录

- 前言
- 步骤 1: 创建 Next.js 应用
- 步骤 2: 创建页面组件
- - 示例页面组件
- 步骤 3: 自定义 _app.js 文件
- 步骤 4: 自定义 _document.js 文件
- 步骤 5: 运行应用
- 步骤 6: 构建和部署
- 总结

前言

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();// 返回页面的初始 propsreturn { props: { data } };
}export default function AboutPage({ data }) {return (<div><h1>About Page</h1><p>{data.description}</p></div>);
}

在这个示例中，我们使用了 getServerSideProps 函数来获取数据。该函数在服务器端执行，并返回页面的初始 props。

步骤 3: 自定义 _app.js 文件

_app.js 文件是 Next.js 应用的根组件，你可以在这里自定义全局的布局和样式。

// pages/_app.js
import App from 'next/app';
import Head from 'next/head';function MyApp({ Component, pageProps }) {return (<><Head><title>My App</title><meta charSet="utf-8" /><meta name="viewport" content="initial-scale=1.0, width=device-width" /></Head><Component {...pageProps} /></>);
}export default MyApp;

步骤 4: 自定义 _document.js 文件

_document.js 文件用于自定义生成的 HTML 文档结构。你可以在这里添加自定义的标签等。

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';class MyDocument extends Document {render() {return (<Html lang="en"><Head><link rel="stylesheet" href="path/to/custom.css" /></Head><body><Main /><NextScript /></body></Html>);}
}export default MyDocument;