Next.js 是一款 React 框架，能够使得 React 应用的开发和部署变得更加简单。本文将介绍如何通过一些优化技巧，从而提升 Next.js 应用的首屏加载时间。
预渲染（Pre-rendering）
预渲染是 Next.js 最强大的功能之一，它能够在编译时将动态生成的页面转换为静态 HTML。这种方法能够使得页面加载速度更快，特别是对于首屏加载时间有很大的帮助。使用预渲染能够显著减少客户端在请求时的等待时间，而且也有助于 SEO（搜索引擎优化），因为页面在客户端到达之前就已经被完全渲染。
在 Next.js 中，可以通过两种方式使用预渲染。
静态生成（Static Generation）
在构建时生成静态 HTML 页面，某些页面只需要在构建时生成一次，就可以在每个请求中重复使用。例如，像博客文章、电子商务产品等这种内容不太可能在短时间内发生变化的页面。
下面是一个页面的示例，它使用静态生成的方式：
-- -------------------- ---- -------
-- ------------------
------ - --------- - ---- -------------
------ ---- ---- -----------
------ ----- -------- ---------------- -
------ -
------ -
- ------- - --- --- - --
- ------- - --- --- - -
--
--------- -----
-
-
------ ----- -------- ---------------- ------ -- -
----- --- - ----- ----------------------------------------------------------------
----- ---- - ----- ----------
------ -
------ -
----
--
----------- --
-
-
------ ------- -------- ------ ---- -- -
----- ------ - -----------
-- ------------------- -
------ ---------------------
-
------ -
--
------
---------------------------
-------
---------------------
------------------
---
-
-上面的代码中，我们使用了 getStaticPaths 和 getStaticProps 两个生命周期方法来构建静态生成页面。getStaticPaths 方法用于指定参数化的路径数组，Next.js 将根据它们来生成包含每个页面的 HTML 文件。getStaticProps 方法用于获取页面所需的数据，并将数据作为属性传递给页面组件。我们还可以通过设置 revalidate 选项来指定多长时间更新一次数据，这对于频繁更新的数据非常有用。
服务器渲染（Server Rendering）
对于一些需要实时生成页面的应用，例如，用户输入后的搜索结果等，可以考虑使用服务器渲染。这种方式能够保持应用的动态特性，同时仍然能让页面更快地加载。
下面是一个页面的示例，它使用服务器渲染的方式：
-- -------------------- ---- -------
-- ---------------
------ - -------- - ---- -------
------ ---- ---- -----------
-------- -------- ------- -- -
----- ------- --------- - ------------
----- --------------- ----------------- - ------------
----- ------------ - ----- -- -- -
----- --- - ----- -------------------------------
----- ---- - ----- ----------
----------------------
-
------ -
--
------
------------- ---------------
-------
------ ------------- ----------- -- ------------------------- --
------- --------------------------------------
----
----------------------------------------- -- -
--- -----------------------------------
---
-----
---
-
-
------ ----- -------- -------------------- -
----- --- - ----- ---------------------------------------------------
----- ------- - ----- ----------
------ -
------ -
-------
-
-
-
------ ------- ------上面的代码中，我们使用了 getServerSideProps 方法来获取每个请求的数据。该方法只在服务器端执行，因此可以实时地生成数据。但是，由于每次请求都需要重新计算页面，因此对于对性能要求较高的应用而言，这种方法并不是最优秀的。
选择预渲染方式
总的来说，对于不经常更改数据的页面，最好使用静态生成方式。对于更频繁的更改，建议使用服务器渲染。但是，在某些情况下，需要在服务器端生成 HTML，但是不能在构建时生成，这时候可以使用数据获取策略（Data Fetching Strategy）来处理。
代码分割（Code Splitting）
代码分割能够将应用程序中的代码拆分成更小的包，使得页面可以更快地加载。这是因为，通过延迟加载代码，减少了最初加载页面所需的代码量，从而加快了渲染速度。
在 Next.js 中可以使用动态导入（Dynamic Import）来实现代码分割。动态导入还可以根据路由自动拆分文件，以便在不同的页面上加载所需的代码。
下面是一个动态导入的示例：
-- -------------------- ---- -------
------ ------- ---- --------------
----- ----- - ---------- -- ------------------------------ -
---- -----
--
-------- ----- -
------ -
--
------ --------
------ --
---
-
-
------ ------- ---上面的代码中，我们使用了 dynamic 函数来动态加载 Chart 组件。我们还通过将 ssr 选项设置为 false 来防止它在服务器端运行。这样一来，每当 Chart 组件需要呈现时，才会加载该组件，避免了初始加载时引入过多代码的问题。
图像压缩（Image Optimization）
图像是许多网站的瓶颈，因为它们的大小往往很大，这将导致页面的加载速度很慢。在 Next.js 中，我们可以使用 next/image 组件来自动优化图像。
该组件使用 next/image-loader 压缩和优化图像，并将它们转换为最适合当前页面的格式。它还提供了一些选项，例如占位符、自动调整大小、优先级等等。
下面是一个 next/image 组件的示例：
-- -------------------- ---- -------
------ ----- ---- ------------
-------- ----- -
------ -
--
--------- ----------
------ ------------------- ------- ------ ----------- ------------ --
---
-
-
------ ------- ---上面的代码中，我们将 src 属性设置为图像文件的路径，alt 属性为识别图像，width 和 height 属性告诉 Next.js 图像的尺寸。通过使用 next/image 组件，我们可以轻松地优化图像，优化我们的页面性能。
结论
Next.js 是构建 React 应用的一种流行方法，它内置了许多用于优化网站性能的功能。在本文中，我们介绍了 Next.js 中的预渲染、代码分割和图像压缩等方法来提升网站的首屏加载时间。我们还提供了示例代码和指导意义，帮助您了解如何使用这些方法来优化您的 Next.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee6e3f6fbf96019721cc19