Web Application Frameworks

Web Application Frameworks#

Webアプリ開発に使われるフレームワークについて

JS / TS メタフレームワーク#

Next.js#

2024年現在圧倒的シェアを持つフレームワーク（State of JavaScript 2024: Meta-Frameworks）。

Next.jsのhosting#

Vercel

AWS

Remix (React Router)#

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

Remixは2024年にReact Routerへ統合された

React Router v7 brings everything you love about Remix back into React Router proper. We encourage all Remix v2 users to upgrade to React Router v7. https://remix.run/blog/react-router-v7

Tutorial / 解説
Remixの考え方
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 />
}

Remixの評判

Hosting

Contents