当前位置：首页 > article >正文

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

article 2024/11/15 10:57:41

文章目录

- 前言
- 步骤 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();

  // 返回页面的初始 props
  return { 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;