解决使用 Next.js 服务器端渲染后网页性能变慢的问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，服务器端渲染（SSR）已经成为了一项非常重要的技术。它可以提高页面的性能、增强SEO效果以及改善用户体验。而 Next.js 作为服务器端渲染的重要工具，其使用非常广泛。但是，在进行 Next.js 服务器端渲染时，有时候会出现网页性能下降的问题。本文将会介绍一些常见的问题以及解决方案，帮助解决 Next.js SSR导致网页性能下降的问题。

问题描述

在使用 Next.js 进行服务器端渲染时，有时候会出现性能下降的问题。具体表现为：

首次渲染时间过长，用户体验欠佳；
页面静态资源请求次数过多，从而导致页面加载时间过长；
SSR后请求变慢。

这些问题都给用户带来了非常不好的体验，所以我们需要找到解决方案。

解决方案

1. 缩小 HTML 文件体积

由于 Next.js 是服务器端渲染框架，每次请求时都会生成一个 HTML 文件并返回给客户端。所以，如果 HTML 文件体积过大，就会导致页面的加载时间变慢。因此，我们可以通过减少 HTML 文件体积的方法来提高页面的性能。

在 Next.js 中，可以通过一下几种方式来减小 HTML 文件体积。

A. 使用 `next/Head` 来优化 `<head>`

在页面渲染时，由于 Head 标签中包含了页面的标题、关键字、摘要等信息，所以 Next.js 会默认将所有 Head 标签的信息都插入到生成的 HTML 文件中。

但是，有时候我们会发现有些 Head 标签不需要在服务器端渲染时进行处理，这样就会浪费服务器资源。因此，我们可以通过在客户端渲染时再处理 Head 标签的信息来优化性能。

我们可以使用 next/Head 组件将 Head 标签中需要在服务器端渲染时处理的内容保存下来，在客户端渲染时再进行处理。这样就可以减少 HTML 文件体积，提高页面的性能。

具体的实现代码如下所示：

// javascriptcn.com 代码示例
import Head from 'next/head';

function Page() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        />
        <link rel="stylesheet" href="/static/css/style.css" />
      </Head>
      <p>Hello world!</p>
    </div>
  );
}

export default Page;

B. 移除不需要的模块和插件

在使用 Next.js 时，我们可能会引入一些不需要的模块或插件，这样会增加代码体积，导致性能下降。因此，建议在使用之前移除不需要的模块和插件。

C. 压缩代码和资源

我们可以通过使用 webpack 自带的压缩工具（例如 UglifyJSPlugin）来压缩代码和静态资源。这样可以减少 HTML 文件体积，从而提高页面的性能。

2. 分离 CSS 代码

在使用 SSR（服务器端渲染）的情况下，如果我们将 CSS 代码嵌入 HTML 文件中，那么每个页面都需要重复下载这些 CSS 代码，这显然会影响页面加载性能。因此，我们可以在使用 SSR 时，将 CSS 代码分离出来，单独生成文件。

为了实现这一目标，我们可以使用 mini-css-extract-plugin 等插件来实现。具体而言，我们可以在 next.config.js 文件中进行配置，将 CSS 提出到单独的 CSS 文件，从而减少 HTML 文件体积，提高页面性能。

以下是实现CSS分离的 next.config.js 配置代码：

// javascriptcn.com 代码示例
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpack(config, options) {
    const { dev, isServer } = options;
    // 将 MiniCssExtractPlugin 引入到 plugins 中
    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: isServer ? 'static/css/[name].css' : 'static/css/[name].[hash:8].css',
        chunkFilename: isServer ? 'static/css/[name].[chunkhash:8].chunk.css' : 'static/css/[name].[chunkhash:8].chunk.css',
        ignoreOrder: true,
      })
    );
    // 使用 MiniCssExtractPlugin 替换掉压缩和优化 CSS
    if (!dev && !isServer) {
      const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
      config.optimization.minimizer.push(new OptimizeCssAssetsPlugin());
    }
    // 使用 css-loader 规划 CSS
    config.module.rules.push({
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
    });
    return config;
  },
};

3. 启用 gzip 压缩

在使用 SSR 的时候，我们有时需要传输大量的静态资源文件。这些文件的体积非常大，会导致页面加载时间过长。因此，我们可以通过启用 gzip 压缩来减少静态资源的传输时间，从而提高性能。

具体而言，我们可以在服务器的配置文件中启用 gzip 压缩。在 Node.js 中，我们可以使用中间件 compression 来实现。以下是使用 compression 中间件的示例代码：

const express = require('express');
const compression = require('compression');
const server = express();
server.use(compression());
server.listen(3000);

使用此示例代码后，服务器将会启用 gzip 压缩，从而大幅提高静态资源传输的性能。

总结

本文介绍了使用 Next.js 进行 SSR 时出现的网页性能下降问题以及解决方案。具体而言，我们可以通过缩小 HTML 文件体积、分离 CSS 代码和启用 gzip 压缩等方式来解决这些问题。这些方法是非常简单易行且有效的，建议在实际项目中加以使用。

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

解决使用 Next.js 服务器端渲染后网页性能变慢的问题