是否可以在 Next.js 13 版本中使用 axios？-解网

问：

我尝试使用 {cache： 'force-cache'} fetch 选项实现 SSG 操作，但即使模拟服务器的数据发生变化，我也总是返回相同的数据。

{ cache： 'no-store'} fetch 选项会更改数据，但这是一种 SSR 方法，所以我认为它不适合我的网站创建博客。

我正在尝试使用 axios 来寻找另一种方法，但我认为我从未在 Next.js 13 版本中使用过 axios。如何在 Next.js 版本 13 中使用 axios 实现 SSG 行为？

import Layout_Mobile from "@/components/Layout/DeviceLayout/Layout_Mobile";
import Layout_PC from "@/components/Layout/DeviceLayout/Layout_PC";
import PostDetailPage from "@/components/PostDetailPage/PostDetailPage";

const fetchPosts = async (params) => {
  const res = await fetch(
    `https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts/${params.slug}`,
    {
      cache: "force-cache",
    }
  )
    .then((response) => response.json())
    .then((data) => {
      return data;
    });

  return res;
};

export const generateStaticParams = async () => {
  const res = await fetch(
    "https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts"
  )
    .then((response) => response.json())
    .then((data) => {
      return data;
    });

  return res.map((post) => ({
    slug: post.id.toString(),
  }));
};

const page = async ({ params }) => {
  const { title, summary, content, author, createdAt } = await fetchPosts(
    params
  );

  return (
    <div>
      <Layout_Mobile></Layout_Mobile>
      <Layout_PC>
        <PostDetailPage
          title={title}
          description={summary}
          content={content}
          author={author}
          date={createdAt}
        />
      </Layout_PC>
    </div>
  );
};

export default page;

我真的很想解决这个问题......

javascript reactjs next.js axios fetch-api

import Layout_Mobile from "@/components/Layout/DeviceLayout/Layout_Mobile";
import Layout_PC from "@/components/Layout/DeviceLayout/Layout_PC";
import PostDetailPage from "@/components/PostDetailPage/PostDetailPage";
import axios from 'axios';

const fetchPosts = async (slug) => {
  const response = await axios.get(`https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts/${slug}`);
  return response.data;
};

export const getStaticPaths = async () => {
  const response = await axios.get("https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts");
  const posts = response.data;

  const paths = posts.map((post) => ({
    params: { slug: post.id.toString() },
  }));

  return { paths, fallback: false };
};

export const getStaticProps = async ({ params }) => {
  const { title, summary, content, author, createdAt } = await fetchPosts(params.slug);

  return {
    props: {
      title,
      summary,
      content,
      author,
      date: createdAt,
    },
  };
};

const PostPage = ({ title, summary, content, author, date }) => {
  return (
    <div>
      <Layout_Mobile></Layout_Mobile>
      <Layout_PC>
        <PostDetailPage
          title={title}
          description={summary}
          content={content}
          author={author}
          date={date}
        />
      </Layout_PC>
    </div>
  );
};

export default PostPage;

在此示例中：

我用数据获取函数替换了该函数。fetchaxios.get

我介绍了指定应为其生成静态页面的动态路径。getStaticPaths

我曾经获取给定路径的特定帖子数据。getStaticProps

原生获取 Web API 也在 React 和 Next.js 中进行了扩展。它会自动重复数据提取请求，并提供一种灵活的方法来获取、缓存和重新验证组件级别的数据。这意味着静态站点生成（SSG）、服务器端渲染（SSR）和增量静态重新生成（ISR）的所有优势现在都可以通过一个 API 获得：

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });
 
// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
 
// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

此信息摘自：https://nextjs.org/blog/next-13

您可以使用重新验证选项：重新验证是清除数据缓存并重新获取最新数据的过程。当您的数据发生更改并且您希望确保显示最新信息时，这很有用。在下一个版本 13 中，仅使用 fetch 您可以为 getStaticProps 做出类似的行为，我希望这对您有用。

0赞 Nazrawi Medhin 11/16/2023 #3

在 Next.js 13 中使用 Axios 是完全可以的，但我建议使用 SWR [React Hooks for Data Fetching]。它基于称为“过时重新验证”的概念。借助 SWR，组件将持续自动地获得数据流更新。

是否可以在 Next.js 13 版本中使用 axios？

Is it possible to use axios in Next.js 13 version?

评论

评论

评论