基于 Next.js 的异步数据调用的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用程序中，处理异步数据变得越来越普遍。有了理解异步数据的最佳实践，您可以更高效地构建、测试和维护您的 Web 应用程序。在该文章中，我们将探讨如何利用 Next.js 的异步数据调用实现最佳实践。

什么是 Next.js？

Next.js 是一个基于 React.js 的轻量级框架，它使得开发服务器端渲染和静态站点生成的 Web 应用程序变得容易。由于 Next.js 可以用于服务器端渲染、静态站点生成和客户端渲染，它成为了构建独立、可扩展的 Web 应用程序的好工具。Next.js 包含一个易用的 API，使得异步数据调用变得简单。

获取异步数据

要使用 Next.js 获取异步数据，您需要在组件的生命周期中使用 getStaticProps、getStaticPaths、getServerSideProps 或 useEffect 钩子来调用数据。下面我们将依次探讨这些方法。

`getStaticProps`

getStaticProps 是 next.js 预渲染（SSG）模式中最强大的数据获取方法。它用于获取组件需要的异步数据并在构建时进行预渲染。每次构建时，它会从服务器端获取数据，并将其注入到组件中。由于预渲染的数据已经包含在页面中，因此客户端渲染的速度非常快。

// javascriptcn.com 代码示例
// pages/articles/[slug].js
export async function getStaticProps({ params }) {
  const { data } = await axios.get(`https://api.example.com/articles/${params.slug}`);
  return { props: { article: data } };
}

function Article({ article }) {
  return (
    <div>
      <h1>{article.title}</h1>
      <div>{article.content}</div>
    </div>
  );
}

在上面的示例中，getStaticProps 函数返回一个参数对象，props 对象中包含 article 数据属性。Article 组件可以轻松地访问该数据并在渲染时使用它。

`getStaticPaths`

如果您的动态路由组件具有不同的参数，例如 /articles/1 与 /articles/2，则应考虑使用 getStaticPaths 函数。该函数用于在构建时生成动态路由。由于有了 getStaticPaths 函数，getStaticProps 函数可以生成最适合的具体页面路由。

// javascriptcn.com 代码示例
// pages/articles/[slug].js
export async function getStaticPaths() {
  const { data } = await axios.get('https://api.example.com/articles');
  const paths = data.map((article) => ({ params: { slug: article.slug } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { data } = await axios.get(`https://api.example.com/articles/${params.slug}`);
  return { props: { article: data } };
}

function Article({ article }) {
  return (
    <div>
      <h1>{article.title}</h1>
      <div>{article.content}</div>
    </div>
  );
}

在上面的示例中，getStaticPaths 函数使用 axios 获取数据并转换为可用于路由参数的形式。然后将数据返回给 paths 参数。使用 {params: {slug: article.slug}} 将数据数组映射到路径数组中。用于调用 getStaticProps 函数以为组件生成特定路由的参数对象。

`getServerSideProps`

getServerSideProps 是 next.js 服务器端渲染（SSR）模式中的数据获取方法。在每次请求时获取数据，然后将其传递给组件以用于渲染。由于该方法在每次请求时都会获取数据，因此每个需求的数据实际上都是唯一的。

// javascriptcn.com 代码示例
// pages/articles/[slug].js
export async function getServerSideProps({ params }) {
  const { data } = await axios.get(`https://api.example.com/articles/${params.slug}`);
  return { props: { article: data } };
}

function Article({ article }) {
  return (
    <div>
      <h1>{article.title}</h1>
      <div>{article.content}</div>
    </div>
  );
}

在上述示例中，getServerSideProps 函数获取特定的路由参数，以在每个请求时为组件生成数据。组件可以轻松访问新生成的数据。

`useEffect`

如果您的数据需要在组件加载时使用，可以考虑在组件中使用 useEffect 钩子。这个方法在组件挂载时调用，并不一定在服务器端预渲染或服务器端呈现时触发。

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

function Article({ slug }) {
  const [article, setArticle] = useState({});

  useEffect(() => {
    async function fetchData() {
      const { data } = await axios.get(`https://api.example.com/articles/${slug}`);
      setArticle(data);
    }

    fetchData();
  }, [slug]);

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

export default Article;

在上面的示例中，useEffect 钩子调用 axios 以获取数据。一旦完成，数据将传递给 setArticle 函数以在组件中进行更新，然后再更新视图。

实践建议

以下是使用 Next.js 进行异步数据调用的最佳实践：

使用 getStaticProps 或 getServerSideProps 将数据注入预渲染静态站点生成页面中。
当数据取决于参数化 URL 时，请使用 getStaticPaths 函数。
使用 useEffect 钩子在组件加载时获取数据，此时注入预渲染静态站点生成页面并不适用。
使用 swr 或其他现代 React 缓存库对获取的异步数据进行缓存处理，避免多次触发请求。

下面是使用 swr 来获取数据的示例：

// javascriptcn.com 代码示例
import { useState, useEffect } from 'react';
import useSWR from 'swr';

function Articles() {
  const { data, error } = useSWR('https://api.example.com/articles', async (url) => {
    const { data } = await axios.get(url);
    return data;
  });

  if (error) return <div>Failed to load articles!</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>Articles</h1>
      {data.map((article) => (
        <div key={article.id}>
           <a href={`/articles/${article.slug}`}>{article.title}</a>
        </div>
      ))}
    </div>
  );
}

export default Articles;

总结

在本文中，我们讨论了如何使用 Next.js 实现异步数据调用的最佳实践，包括 getStaticProps、getStaticPaths、getServerSideProps 和 useEffect 钩子。我们还提供了一些有用的示例代码和实践建议，以便您可以更轻松地将其在自己的应用程序中使用。无论您正在构建单页面应用程序（SPA）还是多页面应用程序（MPA），使用 Next.js 来进行异步数据调用是一种易于使用且效率高的方法。

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