Next.js 服务端渲染（SSR）优化技巧-JavaScript中文网-JavaScript教程资源分享门户

前言

Next.js 是一个基于 React 的服务端渲染框架，它可以让我们在前端应用中使用服务端渲染，从而提升页面加载速度和 SEO。

在实际开发中，为了提高页面性能和用户体验，我们需要对 Next.js 服务端渲染进行优化。本文将介绍一些常见的优化技巧，帮助大家更好地使用 Next.js。

优化技巧

1. 使用缓存

在服务端渲染中，每次请求都会重新生成 HTML，这对于频繁访问的页面来说会造成性能问题。因此，我们可以使用缓存来避免重复生成 HTML。

Next.js 提供了一个缓存机制，可以将生成的 HTML 缓存到磁盘上，下次请求时直接读取缓存，从而提高页面响应速度。

// javascriptcn.com 代码示例
// 服务器端代码
import { createServer } from 'http';
import { parse } from 'url';
import next from 'next';

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const cache = {};

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;

    if (cache[pathname]) {
      res.setHeader('content-type', 'text/html');
      res.end(cache[pathname]);
      return;
    }

    handle(req, res, parsedUrl).then((html) => {
      cache[pathname] = html;
      res.setHeader('content-type', 'text/html');
      res.end(html);
    });
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

2. 使用 CDN

使用 CDN 可以将静态资源（如图片、样式、脚本等）缓存到离用户更近的服务器上，从而提高页面加载速度。

Next.js 提供了一个 AssetPrefix 配置项，可以将静态资源的路径指定为 CDN 上的地址。

// next.config.js
module.exports = {
  assetPrefix: 'https://cdn.example.com',
};

3. 按需加载

在服务端渲染中，所有页面都会被渲染成 HTML，这会导致页面体积变大，加载时间变长。为了避免这个问题，我们可以采用按需加载的方式，只在需要时才加载组件或脚本。

Next.js 提供了一个 dynamic API，可以实现按需加载。

import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('../components/MyComponent'));

4. 使用缩小版 React

在服务端渲染中，我们只需要使用 React 的核心功能，而不需要使用所有功能。因此，我们可以使用缩小版的 React，减小页面体积。

Next.js 提供了一个 reactMode 配置项，可以指定使用缩小版的 React。

// next.config.js
module.exports = {
  reactMode: 'concurrent',
};

5. 预渲染

在服务端渲染中，所有页面都会被渲染成 HTML，这会导致页面体积变大，加载时间变长。为了避免这个问题，我们可以采用预渲染的方式，只在需要时才渲染页面。

Next.js 提供了一个 getStaticProps API，可以实现预渲染。

// javascriptcn.com 代码示例
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

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

总结

本文介绍了一些常见的 Next.js 服务端渲染优化技巧，包括缓存、CDN、按需加载、缩小版 React 和预渲染。这些技巧可以帮助我们提高页面性能和用户体验，让我们的应用更加高效和优秀。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650a9fc995b1f8cacd4f9d54