データの取得と管理 / Learch

データの取得と管理

Remix では、データの取得と管理を効率的に行うためのユニークなアプローチを提供します。このセクションでは、loader関数を使用したデータのフェッチング、フォームの扱い方、そしてクライアント側とサーバー側のデータ取得の違いについて、具体的な例を交えて説明します。

データフェッチング：`loader`関数の使用

ステップ 1: `loader`関数の定義

app/routes/posts/index.jsxで、ブログの投稿リストを取得するためのloader関数を定義します。

import { json } from 'remix';

// 仮のデータソース
let posts = [
  { id: 1, title: 'Remixの基本' },
  { id: 2, title: 'Remixでのルーティング' },
];

export const loader = async () => {
  // 実際のアプリケーションでは、ここでデータベースやAPIからデータを取得します。
  return json(posts);
};

ステップ 2: データの表示

loader関数から返されたデータをuseLoaderDataフックを使用してコンポーネントで取得し、表示します。

import { useLoaderData } from 'remix';

export default function Posts() {
  let data = useLoaderData();
  return (
    <div>
      <h1>ブログ投稿</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

フォームの扱い方：`action`関数の使用

ステップ 1: フォームの作成

app/routes/posts/new.jsxに、新しい投稿を作成するためのフォームを追加します。

import { redirect } from 'remix';

export const action = async ({ request }) => {
  // フォームデータの取得と処理
  // ここでは、実際のデータ保存処理をシミュレートします。
  return redirect('/posts');
};

export default function NewPost() {
  return (
    <form method='post'>
      <label>
        投稿タイトル:
        <input type='text' name='title' />
      </label>
      <button type='submit'>投稿</button>
    </form>
  );
}

ステップ 2: `action`関数でのデータ処理

action関数内で、フォームから送信されたデータを処理します。この例では、新しい投稿をデータベースに保存した後、投稿リストページにリダイレクトします。

クライアント側とサーバー側のデータ取得の違い

サーバー側（loader関数）: 初期ページロード時やデータが必要な時点で、サーバー側でデータをフェッチし、ページに組み込んで送信します。SEO 対策にも有効です。
クライアント側: クライアント側のスクリプト（例えば、React のuseEffect内）でデータをフェッチする方法もありますが、Remix ではloader関数を使用してサーバー側でデータを取得することが推奨されています。

Remixルーティングとページ

Remixスタイリング