Next.js 的数据预取和懒加载的最佳实践

阅读时长 5 分钟读完

Next.js 是一款非常流行的 React 框架，它在保持 React 一贯高效的同时，还具备数据预取和懒加载的特性。本文将介绍 Next.js 中的数据预取和懒加载的最佳实践，并附带详细的示例代码。

什么是数据预取？什么是懒加载？

在普通的 React 应用中，当用户访问一个动态页面时，数据往往是在组件渲染完成后再通过异步请求获取的。这种方式虽然简单，但用户体验、SEO 和性能等方面都存在一些缺陷。

数据预取能够解决这些问题，它是指在页面渲染之前就提前获取数据。一般而言，数据预取也分为两种方式：

  1. 服务器端渲染(Server Side Rendering，SSR)：在服务端获取数据后，再将组件渲染成 HTML，最终将渲染好的 HTML 返回给客户端。
  2. 静态生成(Static Generation)：在编译时即将所有可能用到的数据提前获取后，生成一个 HTML 静态文件，之后每次访问都可直接提供这个文件。

通常我们会针对每次访问都必定会用到的数据进行预取，而不会把一些需要特定点击后才会触发的数据提前获取。

懒加载则是指当组件可视范围进入浏览器视窗时，才开始加载组件的内容。这种方式能够提高网站的性能和速度，避免一开始就把所有的资源都加载，导致最终页面渲染特别慢。

Next.js 中的数据预取和懒加载

Next.js 中支持的两种数据预取方式，也就是数据获取方法，分别是 getStaticProps 和 getServerSideProps。前者是属于静态生成，后者则是属于服务器渲染，获取数据后通过 Props 传递到组件当中进行渲染。

getStaticProps

在使用 getStaticProps 时，我们需要在页面组件文件名的基础上添加一个与之对应的 .js 文件，如下所示：

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

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

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

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

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

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

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

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

上例中，我们首先导入 useRouter 和在函数内创建一个 Post 组件。然后判断当前路由是否处于回退模式中，如果是，则返回一个 Loading 文案。

getStaticPaths 和 getStaticProps 两个方法，构成了 Next.js 利用静态生成方式来预取数据的核心逻辑。其中，getStaticPaths 方法用于指定构建时需要生成哪些路由，而 getStaticProps 则是真正去请求数据的方法。

在 getStaticPaths 中，我们可以传入一些参数进行获取，同时还需要通过 fallback 字段告诉 Next.js 是否支持 SSR 模式下的 fallback。fallback 取值有三种，分别是：

  1. true: 当请求不存在的路由时，Next.js 可以在服务端渲染这个请求，然后再通过静态页面的方式存储一份到磁盘上。
  2. false: 当请求不存在的路由时，Next.js 可以直接返回 404。
  3. 'blocking': 当请求不存在的路由时，Next.js 可以在服务器渲染期间暂停页面渲染直到数据获取完成。

在 getStaticProps 中，我们可以像上例中一样，使用 fetch 或 axios 等工具来通过网络请求获取数据，并将获取到的数据通过 props 传入 Post 组件进行渲染。

getServerSideProps

相对于 getStaticProps，getServerSideProps 则是在服务器端对数据进行预取，并将数据通过 Props 传递进行渲染的一种方式。使用方法与 getStaticProps 区别不大，在此不再赘述。

Next.js 中的懒加载

我们可以通过使用 React.lazy 和 Suspense 两个内置功能来实现 Next.js 的懒加载。 示例代码如下：

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

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

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

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

在上例中，首先我们先引入了 React.lazy 和 Suspense。然后，我们在组件 MyComponent 中通过 lazy 的方式引入了一个组件 component.js。最后，在 Suspense 标签中将引入的组件用于渲染，并在 fallback 中指定加载时的提示。

总结

通过以上的示例代码，我们可以看到 Next.js 中数据预取和懒加载的实现方式，以及如何将其与 React.lazy 和 Suspense 等 React 内置功能结合实现懒加载。 Next.js 的这些优质功能让前端工程师在实现高效动态页面时更加高效，提高了开发体验和用户体验，非常值得开发者进行尝试。

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

纠错
反馈
相关推荐
精选内容