概要

スケルトンローディングは、データフェッチ中のページでスケルトンプレースホルダーを表示し、ユーザーに滑らかな体験を提供する技術です。Next.jsでは、React Suspenseやdynamic importを活用して簡単にスケルトンローディングを実装できます。この記事では、スケルトンローディングを用いた実装方法とその利点について解説します。

スケルトンローディングの基本概念

スケルトンローディングは、データをフェッチしている間に「スケルトン」と呼ばれるプレースホルダーを表示します。これは通常、最終的に表示されるUIの簡略版です。たとえば、テキストや画像の代わりに、灰色のボックスやラインを表示し、コンテンツがレンダリングされるまでの間、ユーザーに「何かが読み込まれている」という視覚的なフィードバックを提供します。

Next.jsでの実装方法

dynamic importでスケルトンローディングを表示

Next.jsでは、dynamic importのloadingオプションを使用して、特定のコンポーネントが読み込まれる前にスケルトンを表示できます。

import dynamic from 'next/dynamic';
// コンポーネントを遅延読み込みし、読み込み中にスケルトンを表示
const MyComponent = dynamic(() => import('./MyComponent'), {
  loading: () => <Skeleton />, // スケルトンコンポーネントを表示
  ssr: false,
});

ここでは、MyComponentが読み込まれる間にSkeletonコンポーネントを表示しています。ssr: falseは、サーバーサイドレンダリングを無効にしてクライアントサイドでのみ実行されるように設定しています。

Suspenseを使ったデータ取得時のローディング

React SuspenseとNext.jsを組み合わせることで、データフェッチ中にスケルトンを表示することが可能です。たとえば、次のようにしてデータ取得中にスケルトンを表示します。

import { Suspense } from 'react';
import Loading from './Loading';
const BlogPage = () => {
  return (
    <div>
      <Suspense fallback={<Loading />}>
        <BlogList />
      </Suspense>
    </div>
  );
};

この例では、BlogListコンポーネントがデータをフェッチする間、Loadingコンポーネント（スケルトン）が表示されます。データが取得されると、BlogListがレンダリングされます。

スケルトンのデザインとスタイリング

スケルトンローディングのデザインは、コンテンツのレイアウトに基づいて決定されます。以下は、シンプルなスケルトンの例です。

.skeleton {
  background-color: #e2e2e2;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

このCSSは、灰色のボックスが左右に移動する「シャマーエフェクト」を作成し、ユーザーに読み込み中であることを示します。

まとめ

Next.jsでスケルトンローディングを実装することで、データフェッチやページロードの際にユーザー体験を大幅に向上させることができます。dynamic importとSuspenseを活用して、スムーズなローディング体験を提供し、視覚的な「カクつき」や遅延の印象を軽減しましょう。