2024 年に React プロジェクトを開始するには

毎年、新しい React プロジェクトを開始する方法について簡単に説明したいと思います。 長所と短所、開発者として必要なスキル レベル、各スターター プロジェクトが React 開発者に提供する機能について考えてみたいと思います。 最後には、さまざまな要件に対する 3 つのソリューションについて知ることができます。

注: スクリーンショットは昨年のものです JavaScriptの現状、最新の結果がまだオンラインになっていないためです。

Vite に反応する

素早く これは、create-react-app (CRA) と呼ばれる最も人気のある (現在は非推奨になっている) React スターターの明確な後継者であり、そこから大きく逸脱することはありません。 CRA (Webpack を使用) と比較して、はるかに高速です。 エスビルド フードの下。

Vite は、サーバー側レンダリング (SSR) よりもクライアント側ルーティング/レンダリングを使用してシングル ページ アプリケーション (SPA) を作成することを好みます。 ただし、最近では SSR がより重要なトピックになっているため、Vite のオプトイン機能として利用できます。

create-react-app (CRA) から来る場合、これは簡単です。 Vite への移行。 次のようなオプトイン機能 TypeScript、SVG、および SSR は、Vite の構成をわずか数回行うだけで実現できます。 vite.config.js ファイルに加えて、機能固有のファイル (例: tsconfig）。

Vite with React を使用すると、開発者は独自のフレームワークなしで React を使用できます。 ルーティング、データフェッチ、状態管理などの補完的な React ライブラリを選択するのは開発者次第です。 テスト。 すべての React フレームワークと比較して、特定の React 機能、ライブラリ、または構成 (プロジェクト レベルで) を強制することはありません。

最後になりましたが、Vite は初心者がフレームワークに邪魔されずに React とその基礎を学ぶことを奨励しています。 本を更新したとき 反応への道 2022 年に、create-react-app を Vite に置き換えました。 Vite が助手席に座っている間、初心者は React とそのコア機能だけに集中できます。

対照的に、フレームワークの環境で React を学習する場合、React がほぼ助手席に座ることになり、代わりにフレームワークの意見 (ファイルベースのルーティングなど) に従わなければなりません。

Vite の利点に反応:

• create-react-app (CRA) のほぼドロップイン代替品
• SPA/CSR フレンドリーですが、SSR はオプトインです
• 枠組みや企業のロックインがない
• 軽量
• 機能レベルで React と混在しない
  • したがって、フレームワークではなく React 自体に焦点を当てます。
• React の基礎を理解するための緩やかな学習曲線
• Vite は React 以外の多くのフレームワークで使用されています

Vite の欠点に対処する:

• SPA/CSRを優先
• フレームワークはサポートされていません
• 統合フレームワーク用に React によって提供されるアーキテクチャ機能への制限付きアクセス
  • 例: React サーバー コンポーネント (RSC)

次への反応

Next.js フレームワークは最も成熟しているため、React 開発者が独自のフレームワーク環境で React を使用したい場合には、当然の選択肢となります。 多くのバッテリーが付属しています。 Next.js が気に入らない場合は、こちらをチェックしてください リミックス。

Next.js では、レンダリング手法としてサーバーサイド レンダリング (SSR) を優先します。 ただし、静的サイト生成 (SSG)、増分静的再生成 (ISR)、およびクライアント側レンダリング (CSR、Vite での反応を参照) とも使用できます。 その上に、React Server Components (RSC) などの最先端のレンダリング技術がいくつか利用可能です。

これがさらに驚くべき点は、Next.js アプリケーションではレンダリング テクニックを組み合わせて使用できることです。 マーケティング ページでは SSG を使用できますが、サインイン/アップの背後にある実際のアプリケーションでは SSR を使用します。

ただし、これだけの能力を発揮するにはコストがかかります。さまざまなレンダリング手法によってエンジニアリングのオーバーヘッドが発生し、フレームワークは常に新しいレンダリング手法に取り組んでおり、日々の技術者がそのペースについていくことができるわけではありません。

結論として、Next.js には多くの機能 (ファイルベースのルーティングなど) が含まれていますが、責任も伴います。 React 自体 (Vite など) は比較的安定していますが、Next.js エコシステムは React をサーバーに導入する最前線で取り組んでいるため、間違いなく変化が見られるでしょう。

Next.js の利点:

• 組み込みライブラリを備えた独自のフレームワーク
• SSR およびその他の多くのレンダリング技術
  • パフォーマンスの向上 (注意: 正しく実行された場合)
  • CSR と比較して SEO が向上 (Vite での反応を参照)
• ヴェルセルは多額の資金を持つビッグプレーヤーとして
  • Reactコアチームと緊密に連携しています
  • 過去に数人の React コア チーム メンバーを雇用している
• 最前線で取り組んでいる

Next.js の欠点:

• 最前線で取り組んでいる
• React with Vite のみと比較した場合のオーバーヘッド/安定性/保守性
• React with Vite と比較して学習曲線が急勾配
  • React 自体ではなく、フレームワークの詳細に重点を置きます
• 選択肢が少なくなる セルフホスティング (Node.js、Docker、静的ファイル)

アストロと反応する

アストロ 開発者がコンテンツ中心の Web サイトを作成できるようになります。 アイランド アーキテクチャと選択的なハイドレーションにより、デフォルトですべての Web サイトに高速なパフォーマンスが提供されます。 したがって、SEO 関連の Web サイトは Astro を使用することで利益を得ます。

実装の観点からは、シングルページ アプリケーション (SPA) よりもマルチページ アプリケーション (MPA) の概念が優先されます。 したがって、それは 歴史的なサイクルを閉じる: MPA が Web サイトの主流の種類 (2010 年以前) から、SPA が引き継ぎ (2010 ～ 2020 年)、MPA に戻る (つまり、そもそも MPA という用語が作られる) まで。

Astro は、フレームワーク (ここでは React) に依存しないソリューションです。 したがって、Astro の組み込みコンポーネント構文または選択したフレームワーク (React など) を使用できます。 ただし、フレームワークはサーバー側のレンダリングのみに存在し、クライアントには公開されません。 インタラクティブなアイランド (アイランド アーキテクチャを参照) をクライアントに提供することを決定した場合にのみ、必要なすべての JavaScript コードがブラウザに送信されます。

結論として、Next (SSR/SSG/ISR のいずれかを使用) はコンテンツ中心の Web サイトにも適していますが、Astro はより具体的な要件 (パフォーマンス、SEO、第一級市民としてのコンテンツ (コレクション、MDX など)) に適合しているようです。 )) コンテンツに焦点を当てた Web サイトをここに持つこと。

Astro の利点に反応してください:

• コンテンツ中心のウェブサイト
• パフォーマンス
• SEO
• フレームワーク (React など) に依存しない

Astro の欠点に対処する:

• 動的 Web アプリケーションについてはアドバタイズされていません
  • しかし彼らはこの分野を徹底的に研究しています

React プロジェクトを開始するためのその他のオプション …

React を使用しない TypeScript/JavaScript SSR フレームワーク …

• nuxt (ビュー)
• SvelteKit (スベルト)
• ソリッドスタート (ソリッド)
• QwikCity (クイック)

React プロジェクトを開始するにはどうすればよいですか?

• (教育者の観点から) React を学び始めている場合は、次の点に固執してください。 React を使った Vite、それは React の基本に可能な限り近いままであるためです。 軽量の SPA/CSR ソリューションのみを探している場合にも、同じことが当てはまります。
• いくつかのレンダリング技術 (およびインフラストラクチャ) が含まれる React の上に独自のフレームワークを探している場合は、以下を使用することをお勧めします。 次はReactで すべての利点と欠点を備えた最も成熟したソリューションとして。
  • Next.js がニーズに合わないが、バッテリーがすべて含まれる SSR フレームワークを探している場合は、チェックしてください。 React でリミックス。
• コンテンツ重視のウェブサイトを作成したい場合は、チェックしてください Astro と React。