Remix

Remix#

RemixはWebフレームワークで、PESPA（Progressively Enhanced SPA) と呼ばれるタイプの、バックエンドとフロントエンドの両方を扱うアーキテクチャになっている。

Remix - Build Better Websites

Tutorial / 解説#

概念#

loader#

レンダリング時にデータを取得する（GETする）ための関数。

サーバ側で実行される ので、SPAでありがちな「クライアント側からデータ取得のためAPIを叩くときにAPI-keyをどう秘匿するか」みたいな問題が解決される。

ページごとに定義して使う。例えば、一覧ページ（例えばposts.tsx）では配列Post[]を返すloader()を定義し、詳細ページ（posts.$postId.tsx)では1つの要素（Post）を返すloader()を定義し、自分のcomponentの中で使う

// loaderの例
import { json } from "@remix-run/node";

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

export default function App() {
  const { posts } = useLoaderData<typeof loader>()

action#

データを更新する（POST, DELETE, PUT, PATCH）ときに使う関数

Outlet#

親ルート内において、子ルートがレンダリングされる場所を示すために使われるコンポーネント

import { Outlet } from "@remix-run/react"

export default function App() {
  return <Outlet />
}

評判#