前言
Next.js 是一款基于 React 的服务器端渲染框架，它提供了出色的性能和开箱即用的配置。在使用 Next.js 构建应用程序时，优化渲染速度是至关重要的，因为它可以缩短首次加载时间、提高用户体验和 SEO。
本文将介绍如何使用 Next.js 优化渲染速度，重点介绍预渲染、数据缓存和代码分割等技术，同时提供实际示例代码。
预渲染
Next.js 使用预渲染技术（也称为静态生成）来提高应用程序渲染速度。它可以在构建应用程序时预先生成所有需要的页面，然后将这些页面保存在静态文件中，以便客户端访问。
这种方法不仅可以提高应用程序的性能，还可以轻松处理 SEO，因为搜索引擎可以轻松地索引静态页面。
预渲染不是适用于所有应用程序的，但是对于不经常更新且包含大量静态内容的应用程序非常有效。
让我们看一下如何配置预渲染：
-- -------------------- ---- -------
-- --------------------
------ - --------- - ---- --------------
------ ----- ---- --------
------ ------- -------- ---------- ---- -- -
----- ------ - ------------
-- ---- --- ------- -----
-- --------------- ---------------
------ -
--
---------------------
------------------
---
--
-
------ ----- -------- ---------------- -
-- -------------- ---- ---
----- -------- - ----- ----------
------------------------------------------------------
--
-- ---------
----- ----- - ------------------------ -- --
------- - ----- --------------- --
----
------ - ------ --------- ----- --
-
------ ----- -------- ---------------- ------ -- -
-- -----------
----- - ---- - - ----- ----------
-----------------------------------------------------------
--
------ -
------ - ---- --
--
-
在此示例中，我们使用getStaticPaths来提供所有要预渲染的页面的 slug 参数。然后使用getStaticProps处理每个页面的数据，然后在组件中使用它。随后，在构建应用程序时将生成所有这些页面，并将它们保存在静态文件中。
当访问一个 URL 时，它将返回构建时生成的预渲染 HTML，然后在客户端加载并运行，从客户端获取数据，最后替换原始 HTML。
如果您的应用程序需要在某些路由上使用动态数据，如用户数据和实时数据，则可以使用以下技术。
数据缓存
Next.js PRPL 模型（Push、Render、Pre-cache、Lazy-load）意味着只有当用户正在访问一个页面时，才会提供相关数据。因此，如果您的应用程序需要动态数据，可以对此进行优化。
使用缓存可以在首次加载时加快应用程序的渲染速度，而不是每次访问页面时都获取数据。它是一种简单而有效的 Next.js 优化技术。
我们可以使用内存缓存或 Redis 等外部存储。让我们看一下如何使用node-cache来实现内存缓存：
-- -------------------- ---- -------
-- --------
----- --------- - ----------------------
----- ----- - --- ----------- ------- -- - -- - -- ------------ -- - -- ---
----------- - ----- -- -
----- ----- - ---------------
-- -------- -
------ ----------
-
------ ------
--
----------- - ----- ------ --- - -- - -- - -- -- -
-------------- ------ -----
--在此示例中，我们使用node-cache来实现内存缓存。您可以执行此操作的任何方式都可以，具体取决于您的偏好和设置。
现在，让我们在我们的 Next.js 应用程序中使用此缓存。这是如何缓存来自 API 的数据：
-- -------------------- ---- -------
-- -----------------
------ - --- - ---- ------------------
------ ----- ---- --------
------ ------- ----- -------- ------------ ---- -
----- -------- - -----------------------
----- ---------- - --------------
-- ------------ -
---------------------------------
-------
-
----- - ---- - - ----- ----------
--------------------------------------------- - ------------
--
------------- ------
---------------------------
-
在此示例中，我们使用上面定义的get和set函数缓存数据。如果我们在缓存中找到了数据，我们会将其返回。否则，我们将向 API 请求数据，并在缓存中保存数据。
请注意，我们在此示例中使用 API 路由处理缓存逻辑，但可以在任何地方使用缓存来获取数据。
此模式不仅在一次请求中提高响应速度，而且通过减少 API 请求来减少了服务端的负载，这使得应用程序可以扩展到更多用户。
代码分割
代码分割是一种将应用程序拆分为较小、更可管理部分的技术。这对于 Next.js 应用程序来说尤其重要，因为它们可以消除使应用程序变得重和缓慢的问题。
Next.js 包括自动代码分割功能，以及异步加载功能。这些都是加速您的应用程序渲染速度的必要工具。
这里是一个示例：
-- -------------------- ---- -------
-- ----------------------------------
------ - -------- - ---- --------
-------- ---------------------- ---- ---- ----- - ---- ------ - --- -- -
----- -------- ---------- - ----------------
------ -
---- -------- --------- ----------- ----------- ---------- - ------ - ------ ---
-------- -- -
----
--------
--------- -----------
---- --
----- --
------- --
------ --
---------------- -------
--
--
--
----
---------
---------
-------------
---------------
---------- -- ----------------
-------- -------- ------ - -- - ------ --
--
------
--
-
------ ------- ---------------------在此示例中，我们使用useState来管理加载状态，并使用react的标准img元素显示图像。我们还添加了一个占位符来显示当图片加载时的效果。这可以防止整个页面闪烁并保持一致性。
加载外部库
接下来，让我们看看如何异步加载外部库：
-- -------------------- ---- ------- -- -------------- ------ ------- ---- --------------- ----- ----- - ---------- -- --------------------------- - ---- ----- --- ------ ------- -------- ------ - ----- ------- - ------ ----- ------ - ------ ------ ------ ----------------- --------------- --- -
在此示例中，我们使用 dynamic 函数延迟加载 Chart 库。我们需要将 ssr 属性设置为 false 来禁用服务器端渲染，因为它不会在服务器上运行。
如上所述，在 Next.js 中包括代码分割和异步加载是优化应用程序性能的必要条件。
结论
使用 Next.js 构建应用程序的优化渲染速度是至关重要的。预渲染、数据缓存和代码分割是加速您的应用程序的必要工具。这些技术可以改善用户体验和 SEO，并减少在服务器上的负载。
借助上面的实际示例和指南，您可以使用 Next.js 优化您的应用程序。现在，开始使用这些技术，并观察您的应用程序的渲染速度提高！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6702f004d91dce0dc849417f