You Don't Need Next.js

You Don't Need Next.js おまえにNext.jsは必要ない ashphy @[email protected]

Next.jsクイズ • <p>にはなにが表示されるでしょうか？ /app/page.tsx export default async function Home() { const now = new Date(); return ( <main> <p>{now.toISOString()}</p> </main> ); }

答え • ビルド時の時間 • 何回リロードしても時間は変わらない • Server ComponentはデフォルトでStatic Renderingされる

• https://nextjs.org/docs/app/building-your-application/rendering/server-components

Next.jsは認知負荷が高い • ありとあらゆるキャッシュがOpt-in • 無効化できないキャッシュも存在する • 知らないと訳の分からない挙動をする

Next.jsはサーキット最速 • Next.jsは • 決められたコースを • 潤沢な予算と • 最高のチームによるサポートを受けながら • サーキットを最速で走る • F1マシン

Next.jsクイズ2
• <p>にはなにが表示されるでしょうか？
/app/page.tsx
"use client";
import { useCallback, useEffect, useState } from "react";
export default function Home() {
const [date, setDate] = useState();
const fetchDate = useCallback(async () => {
const response = await fetch("/api");
const data = await response.json();
setDate(data.date);
}, []);
useEffect(() => {
fetchDate();
}, [fetchDate]);
return (
<main>
<p>{date}</p>
</main>
);
}

/app/api/route.ts
export async function GET(request: Request) {
return Response.json({ date: new Date().toISOString() });
}

答え • 誰かが一番最初にアクセスした時間 • 何回リロードしても時間は変わらない • みんな同じ時間が表示される • Route HandlerはデフォルトでGETリクエストを無期限に キャッシュする

• https://nextjs.org/docs/app/building-your-application/routing/route-handlers

おまえにNext.jsは必要ない • 自分のアプリがDOMの組み立てに何msかかっているか分から ない • →おまえにNext.jsは必要ない • バックエンドの処理に何msかかっているか分からない • →おまえにNext.jsは必要ない • 別ドメインへのアクセス時、名前解決に何msかかっているか 分からない • →おまえにNext.jsは必要ない

おまえに必要なのは ${任意の乗用車} • おまえの目的地は近所のスーパー • F1マシンを買う前に、スーパーまでの道を舗装しろ • バックエンドを速くする • 無駄な再レンダリングを減らす • CDNなどでキャッシュする • 画像/フォントを最適化する

じゃあなにがいいのか？(個人的なオススメ) • Server Side Rendering がしたい • → Remix • Server Side Generation がしたい • → Astro • Client Side Rendering でいいや • 1画面でいい • → Vite + React • ルーティングが欲しい • ここが2024年の分岐路

2023年までのSPA • Vite + React Router

俺たちが本当に欲しかった物 • 黒魔術少なめシンプルなSPAフレームワーク • ファイルベースルーティング • 効率的で認知負荷の低いデータ取得 • タイプセーフ

2024年のSPA戦争 • Vite + TanStack Router plugin • 2023/12/23にv1.0になったばかり • タイプセーフなルーティングができる • Remix SPA mode • 2024/02/20にStable Release • ファイルベースルーティングとしてセットアップされたVite + React Routerとして使える • SPAで始めて、後からSSRできる

Next.jsは最後の手段 • Remixにないものが欲しいならNext.jsを使う • Next.jsが使いたいなら覚悟を決めよう • 開発する前に公式サイトとNext.js Learningを隅々まで読む覚悟 • チームメンバーが全員Next.jsのソースコードを読んで仕様を見つけ出す覚悟 • まだ存在しないベストプラクティスを自分たちで確立していく覚悟 • Chromeのdev toolsすらバグってRSCの通信が見えなくても、パケット キャプチャしてデバッグしていくという覚悟