TODOアプリの次のステップとして、データ管理とサーバーサイドレンダリング (SSR) を活用した効率的なデータフェッチの方法について解説します。この記事では、Loaderを使用してタスクデータを取得し、サーバーサイドで処理する方法を紹介します。
1. Loaderの基礎
LoaderはReact Remixのサーバーサイドフェッチ機能で、ルートがリクエストされるたびにデータを取得します。以下の例では、静的なタスクリストをLoaderで提供します。
例: Loaderでデータを提供する
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からデータを取得する
- 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を活用してデータの追加・削除・編集機能を実装する方法について解説します。
参考情報
- React Remix公式サイト
- Loaderのドキュメント
- JSONPlaceholder API
- Node.js公式サイト
- React Remixを使ってTODOアプリを作ってみる(1):セットアップ
- React Remixを使ってTODOアプリを作ってみる(2):ルーティングとコンポーネント設計
- React Remixを使ってTODOアプリを作ってみる(3):データ管理 サーバーサイドレンダリングとLoaderの活用
- React Remixを使ってTODOアプリを作ってみる(4):アクション処理 タスクの追加・削除・編集機能の実装
- React Remixを使ってTODOアプリを作ってみる(5):デプロイとパフォーマンス最適化
コメント