Next.js vs Remix

Next.js使いからしたRemixの体験メモ

前提

• マーケティング/コーポレートサイト
• 全ユーザーに同じものを見せる
• 更新が頻繁なデータソースがある
• 状態を持たない・mutationしない（お問い合わせフォームくらい）

関係ないこと

以下は大差ない

• ルーティング
• Image,Script,metaなどの便利モジュール
• コンパイル
• API Route的なNodeサーバーとしての機能

以下は要件によっては重要だろうが、今回は関係ない

• Nested route ※Next.jsのlayout相当の機能

ページキャッシュ

Next.jsは「俺に任せろ」系。
開発者は独自の拡張fetchのrevalidate設定や、segment configを与え、Next.jsは、SSG/SSRの選択と自前のフルルートキャッシュ機構で最適なページキャッシュを行う。開発者はCache-Controlを変更することはできない。※1

Remixは「好きにして」系。
SSGはなく、全てはSSRであり、Cache-Controlを自由に設定できる。
各位CDNを用意したら、MDNでも読んで好きにしたまえ。
stale-while-revalidateなんかいいんじゃない？くらい。

Remixが圧倒的にシンプルかつ効果的。

Next.jsのハイテクキャッシュが生きるのは、

• Next / Vercelのソリューションに思いっきり乗り切って
• 複数のデータソースがそれぞれ違うタイミングでアップデートされるような複雑なアプリを作る

の場合と感じる。

スタイリング

Tailwind・CSS Modules・素のCSSといったZero Runtimeのもの

どちらも問題ない。

CSS in JS

どちらも設計思想と衝突してるようで、苦労している。

Next.jsでは制限付きで可能。
一通り対応できているがServer Componentで動かせず、将来的を考えると黄色信号。

Remixは恐らく既に実用に耐えない
公式に推奨しないよと言っていて、exampleもすごい黒魔術コードだらけで、Remix v.1からアップデートされていない。チラツキなどの多くのバグ報告あり。赤信号。

どちらを選んでも、CSS in JSからは離れるしかないのかもしれない。

フォーム

Next.jsは特別な機構を用意しない。※2
フォームはReact世界で作り、送信用API Routeにfetchで送るのが通例。

Remixは、（希望すれば）バリデーション→ミューテーション→UI更新まで含めた一連のソリューションを用意している。サーバーとUIのデータ同期を自動で行う機能でもある。これは楽。

//データを取得
export async function loader({
  request,
}: LoaderFunctionArgs) {
  const user = await getUser(request);
  return json({
    email: user.email,
  });
}

//UIコンポーネント
export default function Component() {
  const user = useLoaderData<typeof loader>();
  return (
    //このactionで起動するactionを指定
    <Form action="/account">
      <input name="email" defaultValue={user.email} />
    </Form>
  );
}

//コンポーネントから起動され、データをアップデート
export async function action({
  request,
}: ActionFunctionArgs) {
  const formData = await request.formData();
  const user = await getUser(request);
  await updateUser(user.id, {
    email: formData.get("email"),
  });
  return json({ ok: true });
}

軽く触った感じはとても便利だが。
バリデーションは送信ボタンを押した後なので、UX的にはB級かも...
データのmutationが盛んなサイトほど生きるもので、今回はそれほど重視しない。

暫定結論

• どちらも十二分な機能を持っている
• 結構似ている。App RouterとPages Routerの差くらいの距離
• 「非VercelのCDNを利用したパーソナライズしないページ」という特別な状況から、キャッシュのシンプルさという一点でRemix＋1000点
• Remix開発陣のフォーカスは動的でmutationが多い複雑なアプリケーションにある。が、よりシンプルなサイトのDXも全く問題ない

---

※1 https://nextjs.org/docs/app/api-reference/next-config-js/headers#cache-control と書いてあるがVercel以外なら設定できたり　よく分からない

※2 server actionはできたてで不安定・よく知らない