在前端开发中，经常会遇到需要在页面加载时显示一些占位内容，以便在数据加载完成之前给用户一个良好的交互体验。这种占位内容通常被称为“骨架屏”，它不仅可以为用户提供一个视觉上的提示，还可以帮助页面的布局保持稳定。
在本文中，我们将介绍如何使用 Next.js 实现一种动态数据加载方案，类似于骨架屏的效果。我们将使用 React，styled-components 和 Next.js 的预渲染功能来实现这个方案。
什么是 Next.js？
Next.js 是一个基于 React 的轻量级框架，它提供了许多有用的功能，例如服务器端渲染、静态导出、自动代码分割等。Next.js 还具有强大的路由功能，可以轻松地处理动态路由和查询参数。
使用 styled-components 创建骨架屏
首先，我们需要使用 styled-components 创建一个占位符组件。这个组件将用于在数据加载完成之前显示占位内容。
-- -------------------- ---- -------
------ ------- - --------- - ---- --------------------
----- -------- - -----------
----------------- --------
-------------- ----
------- -----
-------------- ----
------ -----
--
----- --------------- - -----------
-------- -----
--------------- -------
--
----- ----- - ----------
-- -
-------- --
-
--- -
-------- ----
-
---- -
-------- --
-
--
----- ------------- - -----------------
---------- -------- -- ---------
-------------- -----
--
------ - --------- ---------------- ------------- --这个组件包含了三个样式组件：Skeleton、SkeletonWrapper 和 SkeletonPulse。Skeleton 组件定义了一个简单的灰色背景和圆角矩形，用于表示一条记录的占位符。SkeletonWrapper 组件将 Skeleton 组件包裹在一个垂直方向的容器中，并在每个 Skeleton 组件之间添加了一些垂直间距。SkeletonPulse 组件使用了 CSS 动画，使得占位符在页面上闪烁。
在 Next.js 中使用预渲染
接下来，我们需要在 Next.js 中使用预渲染来渲染我们的页面。预渲染是一种将页面预先生成为 HTML 文件的技术，这样可以大大提高页面的加载速度和 SEO。
首先，我们需要创建一个动态路由页面，用于显示我们的数据。在本例中，我们将使用 /posts/[slug] 路径，其中 [slug] 是一个动态路由参数。
-- -------------------- ---- -------
------ - --------- - ---- --------------
------ - ---------------- ------------- - ---- -------------------------
----- ---- - -- -- -
----- ------ - ------------
----- - ---- - - -------------
------ -
-----
---------------
-----------------
-------------- --
--------- --
--------- --
--------- --
------------------
------
--
--
------ ------- -----在这个页面中，我们使用了 useRouter 钩子来获取路由参数。然后，我们将占位符组件包含在一个 SkeletonWrapper 组件中，并将它们显示在页面上。现在，当用户访问 /posts/[slug] 页面时，他们将看到一个占位符页面，直到数据加载完成为止。
接下来，我们需要使用 getStaticPaths 和 getStaticProps 函数来生成预渲染的 HTML 文件。
-- -------------------- ---- -------
------ - --------------- -------------- - ---- -------
------ - ---------------- -------- - ---- -------------------------
----- ---- - -- ---- -- -- -
------ -
-----
---------------------
------------------
------
--
--
------ ----- -------------- - ----- -- -- -
----- --- - ----- ----------------------------------------------------
----- ----- - ----- -----------
----- ----- - ---------------- -- --
------- - ----- ------------------ --
----
------ - ------ --------- ---- --
--
------ ----- -------------- - ----- -- ------ -- -- -
----- --- - ----- ------
-----------------------------------------------------------
--
----- ---- - ----- -----------
------ - ------ - ---- - --
--
------ ------- -----在这个页面中，我们使用了 getStaticPaths 和 getStaticProps 函数来生成预渲染的 HTML 文件。getStaticPaths 函数从外部 API 获取所有帖子的列表，并将它们转换为动态路由参数。fallback 参数设置为 true，这意味着如果用户访问一个不存在的页面，Next.js 将会生成一个占位符页面，直到数据加载完成为止。
getStaticProps 函数使用路由参数来获取帖子的详细信息，并将其作为 props 传递给组件。现在，当用户访问 /posts/[slug] 页面时，他们将看到一个占位符页面，直到数据加载完成为止。当数据加载完成后，Next.js 将会生成一个 HTML 文件，用于替换占位符页面。
结论
在本文中，我们介绍了如何使用 Next.js、React 和 styled-components 来实现一个类似骨架屏的动态数据加载方案。我们使用了预渲染来生成 HTML 文件，以提高页面的加载速度和 SEO。这个方案可以应用于任何需要在数据加载完成之前显示占位内容的场景，例如新闻列表、产品目录等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6764cd29856ee0c1d42e68fd