Next.js(React)でSuspenseのローディング状態を維持する方法

はじめに

React や Next.js で開発している際、Suspense の fallback コンポーネントを調整する時に、ローディング状態を維持したいと思ったことはありませんか？
今回はローディング状態を維持する方法を書きます。

Suspense の基本的な説明については公式ドキュメントをご参照ください。

公式ドキュメント
https://ja.react.dev/reference/react/Suspense

コード

実装にはNext.js と TypeScriptを使用し、
データ取得はJson Placeholderの API を利用しています。

// src/app/page.tsx
import { Suspense } from "react";
import { LoadingComponent } from "./Loading";
import { Posts } from "./Posts";

const Page = () => {
  return (
    <section className="p-8">
      <h1 className="text-2xl font-bold mb-4">Basic Suspense Demo</h1>
      <Suspense fallback={<LoadingComponent />}>
        <Posts />
      </Suspense>
    </section>
  );
};

export default Page;

// src/app/LoadingComponent.tsx
export const LoadingComponent = () => {
  return (
    <div className="animate-pulse">
      <div className="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
      <div className="h-4 bg-gray-200 rounded w-1/2"></div>
    </div>
  );
};

// src/app/Posts.tsx
export const getPosts = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  await new Promise((resolve) => setTimeout(resolve, 5000));
  if (!res.ok) {
    throw new Error("Failed to fetch posts");
  }
  return res.json();
};

export const Posts = async () => {
  const posts = await getPosts();

  return (
    <div className="space-y-4">
      {posts.map((post: { id: number; title: string; body: string }) => (
        <article key={post.id} className="p-4 border rounded-lg">
          <h2 className="text-xl font-semibold mb-2">{post.title}</h2>
          <p className="text-gray-600">{post.body}</p>
        </article>
      ))}
    </div>
  );
};

問題点

スケルトン UI を調整する際、データ取得が早すぎると fallback の LoadingComponent が一瞬しか表示されず、調整が困難になります。

解決方法

React Developer Tools というブラウザ拡張機能を使用することで、fallback の表示状態を維持することができます。
公式ドキュメント
https://ja.react.dev/learn/react-developer-tools

動画のように、まずDevToolsからReact Developer ToolsのComponentsを開き、対象のSuspenseを選択します。
その次に、suspense の Suspended にあるチェックボックスを押下して true にします。
こうすることでfallback のコンポーネントを表示されたままにすることができます。

おわりに

この方法は、スケルトン UI の微調整作業を効率的に行うための便利な開発テクニックです。
React や Next.js での開発時に、皆様のお役に立てれば幸いです。