Next.js 中如何实现骨架屏-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，骨架屏已经逐渐成为了一个常见的页面优化方案。在 Next.js 中，我们可以通过一些简单的配置和编码，轻松地实现骨架屏效果。本文将介绍 Next.js 中如何实现骨架屏，并提供详细的代码示例和指导意义。

什么是骨架屏

骨架屏是一种在页面加载过程中展示的占位符，它可以让用户在等待页面加载完成的过程中看到一些基本的页面结构和布局，并且可以让用户感觉到页面正在加载。在页面加载完成之后，骨架屏会被真实的页面内容所替换。

在 Next.js 中实现骨架屏的方法可以归纳为两种：静态生成和客户端渲染。下面我们将分别介绍这两种方法的具体实现。

静态生成

在 Next.js 中，我们可以使用静态生成的方式来实现骨架屏。具体的实现步骤如下：

创建一个骨架屏组件

我们可以使用 React 来创建一个骨架屏组件，这个组件的作用是在页面加载过程中展示一个占位符。下面是一个简单的骨架屏组件示例：

function Skeleton() {
  return (
    <div className="skeleton">
      <div className="skeleton-image" />
      <div className="skeleton-text" />
    </div>
  );
}

创建一个静态页面

在 Next.js 中，我们可以通过 getStaticProps 函数来创建一个静态页面。在这个函数中，我们可以使用异步代码来获取真实的页面数据，并将这些数据传递给页面组件。同时，我们也可以在这个函数中使用骨架屏组件来展示一个占位符。下面是一个简单的静态页面示例：

// javascriptcn.com 代码示例
import Skeleton from '../components/skeleton';

export default function Home({ data }) {
  if (!data) {
    return <Skeleton />;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export async function getStaticProps() {
  // 异步获取真实的页面数据
  const data = await fetchData();

  // 将数据传递给页面组件
  return {
    props: {
      data,
    },
  };
}

在上面的代码中，如果我们还没有获取到真实的页面数据，那么就会展示一个骨架屏组件。在数据获取完成之后，我们再将这些数据传递给页面组件，并且展示真实的页面内容。

配置页面加载时长

在静态生成的方式中，我们可以通过配置页面加载时长来控制骨架屏的展示时间。在 Next.js 中，我们可以使用 fallback 参数来配置页面加载时长。具体的实现方式如下：

// javascriptcn.com 代码示例
export async function getStaticProps() {
  // 异步获取真实的页面数据
  const data = await fetchData();

  // 将数据传递给页面组件，并且配置页面加载时长
  return {
    props: {
      data,
    },
    // 如果数据获取失败，那么展示骨架屏组件
    fallback: {
      // 在 3 秒之内展示骨架屏组件
      timeout: 3000,
      // 如果数据获取失败，那么展示骨架屏组件
      fallback: <Skeleton />,
    },
  };
}

在上面的代码中，我们通过设置 timeout 参数来控制页面加载时长。如果在 3 秒之内没有获取到真实的页面数据，那么就会展示一个骨架屏组件。

客户端渲染

在 Next.js 中，我们也可以使用客户端渲染的方式来实现骨架屏。具体的实现步骤如下：

创建一个骨架屏组件

我们可以使用 React 来创建一个骨架屏组件，这个组件的作用是在页面加载过程中展示一个占位符。下面是一个简单的骨架屏组件示例：

function Skeleton() {
  return (
    <div className="skeleton">
      <div className="skeleton-image" />
      <div className="skeleton-text" />
    </div>
  );
}

在页面组件中使用骨架屏组件

在页面组件中，我们可以使用骨架屏组件来展示一个占位符。下面是一个简单的页面组件示例：

// javascriptcn.com 代码示例
import { useState, useEffect } from 'react';
import Skeleton from '../components/skeleton';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 异步获取真实的页面数据
    async function fetchData() {
      const data = await fetch('/api/data').then((res) => res.json());
      setData(data);
    }

    fetchData();
  }, []);

  if (!data) {
    return <Skeleton />;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

总结

骨架屏是一种常见的页面优化方案，在 Next.js 中我们可以使用静态生成和客户端渲染的方式来实现骨架屏。无论使用哪种方式，我们都需要注意页面加载时长的配置，以保证用户体验。同时，我们也需要注意骨架屏的设计和布局，以使其更符合页面内容和风格。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655b05ead2f5e1655d5308ff