利用 Next.js 构建 SSR 应用的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，单页面应用（Single Page Application，SPA）已经成为了主流。然而，SPA 也带来了一些问题，例如 SEO 不友好、首屏加载慢、对爬虫的支持不好等等。

对于这些问题，后端渲染（Server-Side Rendering，SSR）是一种有效的解决方案。Next.js 正是针对这个问题而出现的一款开源框架。

Next.js 简介

Next.js 是一个基于 React 的 SSR 框架，它首先通过服务器渲染页面，并在客户端加载页面，以提供更快的加载时间和更好的搜索引擎优化。

下面是一些 Next.js 的主要特点：

灵活的路由系统：Next.js 自动为所有 pages 目录下的文件创建路由规则。
自动的代码分割：Next.js 可以自动分割代码，使应用程序更快地加载并采用更好的用户体验。
自动服务端渲染和客户端渲染：Next.js 自动执行 SSR 和客户端渲染，以加快页面加载速度，并使应用程序在搜索引擎上更友好。
针对性能进行优化：Next.js 会根据你的应用程序配置对用户的浏览器和设备进行自动优化。

如何使用 Next.js 进行 SSR 应用

1. 创建 Next.js 应用

使用以下命令创建 Next.js 应用程序：

npx create-next-app my-app
cd my-app
npm run dev

如上所述，Next.js 创建了 /pages 文件夹。所有在该文件夹中创建的文件将根据其文件名自动成为路由。

2. 创建页面

在 /pages 文件夹中创建一个名为 index.js 的新文件。此文件将成为根URL的默认页面。

import React from 'react';

export default function Home() {
  return (
    <div>
      <h1>Next.js SSR Example</h1>
      <p>This is a simple example of Next.js with SSR</p>
    </div>
  );
}

3. 启用服务器端渲染

打开 package.json 文件并添加以下配置：

{
  "name": "next-app",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

在这里，我们配置了 next 命令。

使用 npm run dev 命令启动本地开发服务器。

4. 管理页面元素

在使用 Next.js 进行服务器端渲染时，ReactDOM.hydrate() 方法将从客户端执行。

这意味着，类似于 CRA（Create React App）项目，所有的 Element ID 都需要原样包含在服务器端生成的 HTML 中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Next.js SSR Example</title>
  </head>
  <body>
    <div id="__next">
      <div data-reactroot role="main" class="page">
        <h1>Next.js SSR Example</h1>
        <p>This is a simple example of Next.js with SSR</p>
      </div>
    </div>
    <script src="/_next/static/chunks/main.js"></script>
  </body>
</html>

注意 __next div 的存在。

5. 构建项目

使用以下命令构建 Next.js 应用程序，准备将其部署到生产服务器上：

npm run build

6. 启动服务器

使用以下命令在生产模式下启动服务器：

npm run start

现在，应用程序可以在浏览器中通过 http://localhost:3000 访问。

最佳实践

1. 启用缓存

启用缓存将大大提高应用程序的性能。 Next.js 具有启用页面级缓存的内置功能。可以通过设置页面 getInitialProps 中的 revalidate 属性来启用缓存：

export async function getStaticProps() {
  const res = await fetch('https://example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60,
  };
}

以上代码片段将缓存页面并将其保留60秒。

2. 启用代码分割

使用 Next.js 自动代码分割功能可根据需要加载组件并将应用程序的加载速度最小化。

使用import()动态导入组件。

例如：

<button onClick={async () => {
  const { default: Dialog } = await import('../components/Dialog');
  showDialog(Dialog);
}}>
  Show dialog
</button>

使用next/dynamic函数（高阶组件）

例如：

import dynamic from 'next/dynamic';
const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/Foo').then(mod => mod.Foo),
  { ssr: false }
);

3. 添加 Head 组件

使用Next.js中的Head组件可让您轻松地添加文档头。通过添加Head组件，您可以更轻松地包含元数据、脚本和其他文档级数据。

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <h1>Welcome to my page</h1>
    </div>
  );
}

4. 部署 Next.js 应用程序

部署 Next.js 应用程序有许多选择，可根据个人需求进行选择。

Vercel: 部署 Next.js 的理想选择。Vercel 是 Next.js 团队创建的一项服务。
AWS Elastic Beanstalk: 可以在 AWS 云上轻松管理应用程序。
Heroku: 轻松部署 Next.js 应用程序。

总结

Next.js 是构建 SSR 应用程序的最佳解决方案。它具有自动代码分割、服务器和客户端渲染和灵活的路由系统等优点。

通过本文介绍的步骤和最佳实践，您可以轻松使用 Next.js 构建您的应用程序，并在性能和使用体验方面实现最佳结果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a5301cadd4f0e0ffda708a

利用 Next.js 构建 SSR 应用的最佳实践