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

vd2z7a6w 于 2023-11-18 发布在 React

关注(0)|答案(3)|浏览(270)

我尝试使用{cache：'force-cache'} fetch选项实现SSG操作，但即使模拟服务器的数据发生更改，我也总是返回相同的数据。
{该高速缓存：'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;

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

reactjs

来源：https://stackoverflow.com/questions/77492489/is-it-possible-to-use-axios-in-next-js-13-version

3条答案

按热度按时间

iih3973s1#

在Next.js版本13中，您可以使用axios库来获取数据并实现静态站点生成（SSG）。要使用axios实现SSG行为，您可以在页面中使用getStaticPaths和getStaticProps函数。以下是如何修改代码的示例：

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;

字符串
在这个例子中：
我用axios.get替换了fetch函数来获取数据。
我引入getStaticPaths来指定应该为其生成静态页面的动态路径。
我使用getStaticProps来获取给定路径的特定post数据。

赞(0）回复(0）举报 2023-11-18

relj7zay2#

原生获取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
您可以使用revalidate选项：重新验证是清除数据缓存并重新获取最新数据的过程。当您的数据更改并且您希望确保显示最新信息时，这很有用。在Next版本13中，只有使用fetch，您才可以为getStaticProps做出类似的行为，我希望这对您有用。

赞(0）回复(0）举报 2023-11-18

6ie5vjzr3#

Axios与Next.js 13配合使用完全没问题，但我建议使用SWR [React Hooks for Data Fetching]。它基于称为stale-while-revalidate的概念。使用SWR，组件将不断自动更新数据流。

赞(0）回复(0）举报 2023-11-18