Zenn
Open3

Next.js

kirikkirik

src/app/data-feching.tsxを作成してpnpm buildする。

src/app/data-feching.tsx
type Blog = {
  id: number;
  title: string;
  content: string;
  author: string;
  date: string;
  category: string;
};

export default async function DataFetching() {
  const res = await fetch("https://api.vercel.app/blog");
  const blogs: Blog[] = await res.json();
  console.log({ blogs });

  return (
    <>
      <h1>Data fetching</h1>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id}>{blog.title}</li>
        ))}
      </ul>
    </>
  );
}

data-feching.htmlが作られる。

fetch("https://api.vercel.app/blog", { cache: "no-store" });またはexport const dynamic = 'force-dynamic'を追加するとpnpm build時にdata-feching.htmlは生成されずにリクエストごとに毎回作られる。cookiesやheadersなどを触った時もHTMLが動的に作られる。

kirikkirik

fetchが二つ呼ばれていて片方だけ"no-store"がついていた場合

type Blog = {
  id: number;
  title: string;
  content: string;
  author: string;
  date: string;
  category: string;
};

export default async function DataFetching() {
  const recentPostResponse = await fetch("https://api.vercel.app/blog/1");
  const recentPost: Blog = await recentPostResponse.json();

  const blogsResponse = await fetch("https://api.vercel.app/blog", {
    cache: "no-store",
  });
  const blogs: Blog[] = await blogsResponse.json();

  return (
    <>
      <h1>Data fetching</h1>
      <h2>Recent post</h2>
      <div>{recentPost.title}</div>
      <h2>Blog List</h2>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id}>{blog.title}</li>
        ))}
      </ul>
    </>
  );
}

data-feching.htmlは生成されない。

コンポーネントに切り出しても同じ。

async function BlogList() {
  const blogsResponse = await fetch("https://api.vercel.app/blog", {
    cache: "no-store",
  });
  const blogs: Blog[] = await blogsResponse.json();

  return (
    <>
      <h2>Blog List</h2>
      <ul>
        {blogs.map((blog) => (
          <li key={blog.id}>{blog.title}</li>
        ))}
      </ul>
    </>
  );
}