はじめに

みなさんお久しぶりです！Web エンジニアの yoshimo（nakamoto）です。
React アプリの開発に従来用いられてきた Create React App が公式に非推奨になったようです。
今回はその経緯と今後の React アプリ開発について共有します。

CRA（Create React App）

まず、Create React App が登場する以前は React アプリを開発するために webpack などのバンドラを自らメンテする必要がありました。しかし、webpack も学習コストが高かったため、当時の React は環境構築するにも一苦労という課題がありました。そこに Create React App が出たため、誰でも簡単に React の環境構築をできるようになったという背景があります。

ただ、Create React App には高機能なアプリを作るために不足してるところもあり、それらの問題を解決できるフレームワークは既出であることと Create React App にはいまアクティブメンテナーがいないことを理由に非推奨になりました。

公式は今後、新しい React アプリを作るときは Next.js などのフレームワークを使用することと、元々 React が入ってないアプリに React を入れたかったら Vite を使用することを推奨してます。Create React App に不足してるところは主にルーティング、データフェッチ、コード分割などの問題に対するソリューションです。

ルーティング

まず、ルーティングはパスに一致するコンポーネントを表示する必要がありますが、useState によって管理するという手法だと URL に対応できません。ブラウザのアドレスバーに表示される URL が変化しないため、ユーザーが特定の画面に遷移しても、その遷移先の URL をブックマークしたり、他の人とリンクを共有したりすることができません。その問題を解決するためには、React Router などのルーティングライブラリを使用する必要があります。

import {useState} from 'react';

import Home from './Home';
import Dashboard from './Dashboard';

export default function App() {
  // ❌ Routing in state does not create URLs
  const [route, setRoute] = useState('home');
  return (
    <div>
      {route === 'home' && <Home />}
      {route === 'dashboard' && <Dashboard />}
    </div>
  )
}

データフェッチ

次に、データフェッチに関する問題があります。データフェッチは useEffect で fetch でデータを取って来ることもできますが、コンポーネントがレンダリングされたあとにデータフェッチされる為、ネットワークウォーターフォールが発生するという問題があります。

export default function Dashboard() {
  const [data, setData] = useState(null);

  // ❌ Fetching data in a component causes network waterfalls
  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}

その問題を解決するためには、コンポーネントのレンダリング以前にリクエストが開始されるようにデータをプリフェッチする必要があり React Query, SWR, Apollo, Relay（Apollo と Relay は GraphQL 関連）などのデータフェッチライブラリを使用する必要があります。

コード分割

最後に、コード分割に関する問題があります。Create React App には、コード分割ソリューションは含まれていないため、アプリは単一のバンドルとしてビルドされます。

- bundle.js    75kb

しかし、理想的なパフォーマンスを得るには、コードを別々のバンドルに「分割」して、ユーザーが必要なもののみをダウンロードできるようにする必要があります。これにより、ユーザーがいまいるページを表示するために必要なコードのみがダウンロードされるため、アプリの読み込み時間が短縮されます。

- core.js      25kb
- home.js      25kb
- dashboard.js 25kb

React.lazy でコンポーネントがレンダリングされたらコードをフェッチすることもできますが、先述のネットワークウォーターフォールの問題が発生しますし、そもそも手動でコンポーネントを Lazy にするのみならず、バンドラレベルでもコード分割する必要があるので、フレームワークを使った方が楽という話になります。

import Home from './Home';
import Dashboard from './Dashboard';

// ✅ Routes are downloaded before rendering
const router = createBrowserRouter([
  {path: '/', lazy: () => import('./Home')},
  {path: '/dashboard', lazy: () => import('Dashboard')}
]);

まとめ

只これらの問題（ルーティング、データフェッチ、コード分割）はほんの一例に過ぎず、その他にも様々な問題があるため、React アプリを新たに開発するときはフレームワークを使用することが推奨されております。

• Accessibility
• Asset loading
• Authentication
• Caching

• Error handling
• Mutating data
• Navigations
• Optimistic updates

• Progressive enhancement
• Server-side rendering
• Static site generation
• Streaming

参照

https://react.dev/blog/2025/02/14/sunsetting-create-react-app