React Remixを使ってTODOアプリを作ってみる(3):データ管理 サーバーサイドレンダリングとLoaderの活用

TODOアプリの次のステップとして、データ管理とサーバーサイドレンダリング (SSR) を活用した効率的なデータフェッチの方法について解説します。この記事では、Loaderを使用してタスクデータを取得し、サーバーサイドで処理する方法を紹介します。

1. Loaderの基礎

LoaderはReact Remixのサーバーサイドフェッチ機能で、ルートがリクエストされるたびにデータを取得します。以下の例では、静的なタスクリストをLoaderで提供します。

例: Loaderでデータを提供する

  1. app/routes/tasks.tsxを編集します。
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

type Task = {
  id: string;
  title: string;
};

export const loader = async () => {
  const tasks: Task[] = [
    { id: "1", title: "タスク1" },
    { id: "2", title: "タスク2" },
  ];
  return json(tasks);
};

export default function Tasks() {
  const tasks = useLoaderData<Task[]>();
  return (
    <main>
      <h1>タスク一覧</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </main>
  );
}

結果

ブラウザでhttp://localhost:3000/tasksにアクセスすると、サーバーサイドで提供されたタスクリストが表示されます。

2. 動的データの取得

静的データに加えて、APIやデータベースから動的にデータを取得する方法を見てみましょう。

例: 外部APIからデータを取得する

  1. Loader関数を以下のように更新します。
export const loader = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=5");
  const tasks = await response.json();
  return json(tasks);
};

結果

ブラウザにタスクリストが表示され、外部APIから取得されたデータが使用されます。

3. サーバーサイドとクライアントサイドの連携

Loaderを使用することで、サーバーサイドでデータを準備し、クライアントサイドで簡単に利用できます。この仕組みは、以下のような利点を提供します。

  • SEOの向上: 初期データがサーバーでレンダリングされるため、検索エンジンがデータを認識しやすくなります。
  • パフォーマンスの向上: サーバーサイドでデータをフェッチするため、クライアント側の負担が軽減されます。

まとめ

この記事では、React RemixのLoaderを使用したサーバーサイドレンダリングとデータ管理の基本を学びました。次回の記事では、Actionを活用してデータの追加・削除・編集機能を実装する方法について解説します。

参考情報

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

新卒4年目です。spring boot, jquery, vue を使ってフロントエンド開発、quarkus、azure kubernetesを使ってバックエンドを作ってました。 今は、UXデザイナーを目指して勉強中です! よろしくお願いします。

コメント

コメントする

CAPTCHA


目次