Next.js 服务端渲染技巧与性能优化经验分享-JavaScript中文网-JavaScript教程资源分享门户

引言

近些年，JavaScript 技术的迅猛发展使得前端应用的规模和复杂度不断增长，单单依靠客户端渲染已经难以满足业务需求。服务端渲染（SSR）应运而生，它可以带来更优秀的 SEO、更快的页面加载速度和更为友好的用户交互体验。Next.js 是一款流行的 React 服务端渲染框架，也是目前最受欢迎的静态网站生成器之一。在此，本文将为您介绍 Next.js 的服务端渲染技巧与性能优化经验。

Next.js 简介

Next.js 是一款基于 React 构建的应用框架，Next.js 编写的应用可以支持服务端渲染、静态生成和 SSR+静态生成三种部署方式。Next.js 通过自动优化和预执行，使应用具备更优秀的性能和更好的开发体验。

服务端渲染的实现原理

对比客户端渲染（CSR），服务端渲染（SSR）是由服务端直接返回 HTML、CSS 和 JS 等资源，从而避免浏览器请求资源的时间消耗。这也是为什么 SSR 性能更优秀的重要原因。

Next.js 的服务端渲染主要是通过两个基本概念来实现的：

自动化代码分割
预渲染

自动化代码分割

Next.js 使用 webpack 的代码分割功能，通过 import() 语法实现代码分割。在需要使用时，代码分割会分割成适当的块。大块可以按需预取，小块则可以根据需要动态加载。整个过程都由 Next.js 自动完成。

预渲染

Next.js 执行服务端渲染时，它将渲染应用的所有页面作为 HTML 发送到浏览器，从而加快页面的加载速度。同时，Next.js 通过非常小的 JavaScript 代码，在浏览器端使用 React 渲染这些页面，从而使得页面具有各种交互性能。

Next.js 服务端渲染技巧

服务端数据获取

在使用 Next.js 服务端渲染时，我们需要在 getServerSideProps 方法中进行服务端数据获取。可以通过服务端调用 API 或者直接在 getServerSideProps 中获取数据，最后将数据作为 props 返回给组件。

例如：

-- -------------------- ---- -------
------ ----- -------- --------------------------- -
  ----- --- - ----- ----------------------------------------
  ----- ----- - ----- ----------

  ------ -
    ------ -
      ------
    --
  -
-

动态路由

在使用动态路由时，我们需要通过 getServerSideProps 方法动态获取数据并传递给组件。通过传递动态值，Next.js 无需在浏览器环境下处理数据，可以更快速地创建响应页面。

例如：

-- -------------------- ---- -------
------ ----- -------- --------------------------- -
  ----- - -- - - -------------
  ----- --- - ----- ----------------------------------------------
  ----- ---- - ----- ----------

  -- ------- -
    ------ -
      --------- -----
    -
  -

  ------ -
    ------ -
      -----
    --
  -
-

静态文件引用

在组件中引用静态文件时，如果使用相对路径，将会影响页面的服务端渲染。为避免这种情况发生，我们应该使用 Next.js 提供的内置方法 publicRuntimeConfig。配置 publicRuntimeConfig 后，可以在组件中使用 process.env 对象来处理静态文件的相对路径。

module.exports = {
  publicRuntimeConfig: {
    staticFolder: '/static',
    uploadFolder: '/uploads',
    // ...
  },
}

const Image = ({ src, alt }) => (
  <img
    src={`${process.env.staticFolder}${src}`}
    alt={alt}
  />
)

export default Image

Next.js 性能优化经验分享

过多请求

使用 Next.js 进行服务端渲染时，我们应该避免过多的网络请求。可以通过将请求组合成单个请求或者使用 HTTP/2 多路复用技术来减少网络请求的数量。

压缩 HTML

Next.js 可以通过 gzip 压缩传输的 HTML、CSS 和 JS 文件，从而减小传输的数据量。可以在 next.config.js 文件中添加以下配置:

module.exports = {
  compress: true,
}

打包设置

在 Next.js 打包时，我们可以将第三方库打包为单独的 chunk，从而减少 bundle 的大小，加快页面加载速度。可以在 next.config.js 文件中添加以下配置:

-- -------------------- ---- -------
-------------- - -
  --------------- -
    ------------------------------------------- - -
      -------- -
        ----- -------------------------
        ----- ----------
        ------- ------
      --
    -

    ------ ------
  --
-

缓存

Next.js 可以使用缓存技术来减少请求服务器的次数。可以自定义缓存控制策略，例如设置缓存时间，或者在特定条件下进行禁用缓存。

export async function getServerSideProps(context) {
  context.res.setHeader('Cache-Control', 'max-age=3600')

  // ...
}

总结

通过本文的介绍，我们了解了 Next.js 服务端渲染的基本原理以及一些优化技巧。在实际开发中，服务端渲染是提升网站性能和体验的一个十分重要的环节，希望本文可以为您提供一些参考和帮助。

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