こんにちは！sangunです 👋 GMOペパボ エンジニア Advent Calendar 2024の8日目の記事を担当させていただきます。

なぜこの記事を書くことになったのか

最近、新規プロジェクトを立ち上げる機会があり、フレームワークの選択で悩む日々を過ごしてました。 最強のNext.jsにするか...それかReact Router(当時はRemix)にするか...それともReactだけにするか... 🤔

結局いくつかの理由をベースとしてReact Routerで開発をしていますが、 今日は、React Routerを実際に使って感じた良かったポイントを共有したいと思います。

React Router Official Documentation

React Router使ってみて嬉しかった部分

1. 深いね〜をあんまり感じなかった

普段、Next.jsを使っていた時は、「これはNext.js特有のルールなんです。。」と説明しなければならない部分が多かったんですが、React Routerではそこまで特別な仕様がないと思いました。

• Web標準APIベースなので、WEBとJSの基本さえ分かれば大丈夫
• 特別な魔法はない

2. データFetchがスッキリした(clientLoader \ clientAction)

クライアント層でデータをFetchする際には以下のように書くと思います。

const = [data , setData] = useState()
useEffect(() => {
  // ここでデータを取得
  setData(hoge)
  // あそこでもデータを取得
  // どこでもデータ取得
}, []); // <- たまにここミスたらめんど

React RouterではclientLoaderやclientActionを利用して、hooksを使わずにデータの操作ができます。

Next.jsでもServer Actionsがあるし、React RouterもServer側の処理があるんですが、 こちらは少し違ってClient層でServer Actionsのように動作します。

// routes/products/route.tsx
export async function clientLoader() {
  const res = await backend.getUser()
  return {
    user: res
}

export const UserPage = ({ loaderData }: { loaderData: LoaderData }) => {
  const data = loaderData
  return <UserInfo customer={data.user} />
}

export default UserPage

スッキリしましたね。