Remix入門④ - Remixでのデータフェッチ、どうやってんの？ #JavaScript

おっす！Remix入門シリーズも今回で４回目やで！
今日はRemixでのデータフェッチングについて話してみよかー。
データフェッチってなんや？どうやって実装するんや？って思ってるやろ？今回はその辺をわかりやすく説明していくで！

Remixでのデータフェッチって？

Remixではな、ルートに対応するコンポーネントでデータをフェッチするんや。これによって、ページごとに必要なデータをサーバーサイドで取得して、ページを構築できるんやで。これができると、初回のページ表示がめっちゃ速くなるんや。

サンプルコード: データフェッチの基本

// app/routes/posts.js
import { useLoaderData } from "remix";

export let loader = async () => {
  let response = await fetch("https://jsonplaceholder.typicode.com/posts");
  let posts = await response.json();
  return posts;
};

export default function Posts() {
  let posts = useLoaderData();
  return (
    <div>
      <h1>ブログの記事一覧やで</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

このコードではな、ブログの記事一覧をAPIから取得して、表示してるんや。loader 関数でデータをフェッチして、useLoaderData フックを使ってコンポーネントでそのデータを使ってるんやで。

なんでええんや、この方法は？

効率的なデータロード: ページごとに必要なデータをサーバーサイドで先に取得できるから、ブラウザでの処理が減るんや。これによって、ページの表示が速くなるんやで。
シンプルな実装: データの取得と表示のロジックが1つの場所にまとまるから、コードがシンプルで読みやすくなるんや。
パフォーマンスの向上: SSRと組み合わせることで、ユーザーがページを訪れたときにはすでに必要なデータが揃ってる。これがパフォーマンスの向上につながるんや。

まとめ

いかがやったか？Remixでのデータフェッチングは、シンプルかつ効率的やで。ページ表示の速度を上げたい、データの扱いをもっとスマートにしたいって思ってるなら、Remixはめっちゃええ選択肢やで。次回の「Remix入門⑤」では、さらにRemixの機能を深掘りしていくから、楽しみにしててな！