意欲的なReact開発者向けの新しい翻訳を公開します。この記事が、次のプロジェクトに適したツールの選択に役立つことを願っています。
Reactで新しいプロジェクトを作成する場合、NextJSまたはCreate-React-Appのどちらかを選択できます。Gatsbyは、スケーリング時のビルドが遅いため、ほとんど使用されていません。さらに、NextJSはますます便利な静的サイトジェネレーターになりつつあります。
フォト アルチョームSapegin上 Unsplash
この記事では、我々はNextJSの長所と短所を見てみましょうと作成し、アプリが反応だけでなく、それぞれに適した使用例について説明します。
Create-React-App
Create-React-Appは、新しいReactアプリケーションを作成できるツールのセットです。CRAは、webpackやbabelなどの依存関係をreactスクリプト内に格納します。Create-React-Appを使用すると、トランスパイラーやバンドラーを簡単に操作できます。
これは、これらの「隠された」依存関係を更新することはまったく難しいことではないことを意味します。反応スクリプトの新しいリリースを待って更新する必要があります。壊れたWebpack構成の変更を修正する必要はありません。
Create-React-Appを使用する利点
意見なし
どのライブラリも使用できます。ルールやガイドラインはありません。ルーティング用のライブラリの選択もあなたの裁量に任されています。
Create-React-Appsはクライアント側でレンダリングされますCreate-React-Appsはクライアント側でレンダリングされる
ため、展開は簡単です。S3など、任意のファイルホスティングでアプリケーションをホストできます。CSRアプリケーションははるかに簡単に操作できます。
Create-React-Appのデメリット
カスタマイズ
が難しいアプリケーションをカスタマイズする組み込みの方法はありません。 Webpack構成を微調整する必要がある場合、唯一のオプションは、cracoやejectなどのサードパーティツールを使用 することです。ただし、ejectコマンドを実行すると、Create-React-Appを使用する利点のほとんどすべてが失われます。 Create-React-App
の複雑さを抽象化し、
サポートされていないことを実行する必要がない限り、うまく機能します。大変です！ BabelとWebpackの設定を非表示にすることで、Create-React-Appを簡単に開始できます。ただし、これにより、開発者はこれらの重要なツールがどのように機能するかについて詳しく知ることができなくなります。
SEOに悪影響を与える
Create-React-Appsをクライアント側でレンダリングしているため、このツールはSEOを実装するのが難しいです。Create-React-Appsは、eコマースやマーケティングの目的で使用しないでください。
NextJS
NextJSの方がはるかに多いため、NextJSとCreate-React-Appを比較することは完全には正しくありません。CRAはReactアプリケーションをスキャフォールディングするためのツールですが、NextJSはそれらを構築するためのフレームワークです。NextJSは、すぐに使用できるサーバー側のレンダリング、静的サイトの作成、サーバーレス機能などを提供します。これは、効果的なWebアプリケーションを作成するために必要なすべてのものを提供するツールのセットです。
NextJSでさらに進んでみませんか？HappyKitをお試しください 。
HappyKitは、NextJSアプリケーションに反復タスク（CRONタスク）、非常に単純な分析、および機能フラグを提供します。ここからベータ版にサインアップでき ます！
NextJSを使用する利点
NextJSは非常に高速です！
サーバー側のレンダリングと静的サイト生成のおかげで、NextJSアプリケーションは大幅に高速に実行されます。次に、デフォルトのパフォーマンス最適化を処理します。
Easy Deployment
Vercel（NextJSの背後にある会社）を使用すると、フルスタックのReactアプリケーションを簡単に 展開できます。マウスを数回クリックすると、プロフェッショナルな展開パイプラインが得られます。このプロセスには、事前展開と実稼働展開が含まれます。
NextJSはルーティングを提供します
NextJSは、アプリケーションでAPIを作成するための迅速で簡単な方法を提供します。アプリケーションがサードパーティのAPIを使用している場合、プロキシ要求とトークンストレージ用に独自のAPIが必要になることがよくあります。NextJSルーティングはこれに最適です。
カスタマイズが簡単
NextJSを使用すると、babelまたはwebpackの構成をカスタマイズできます。webpackローダーまたはbabelプラグインの追加は簡単です！
NextJSを使用するデメリット
NextJSは独創的なフレームワーク
ですNextJSでルートを操作する方法は1つしかなく、カスタマイズすることはできません。NextJSはファイルベースのルートに制限されており、動的ルートはNodeJSサーバーを使用している場合にのみ可能です。
NextJSはいつ使用する必要がありますか？
ランディングページを作成する場合、
NextJSはランディングページの作成やその他のマーケティングタスクの実装に最適です。
SEOが重要な
場合eコマースサイトを構築する場合、検索エンジンの最適化がこれまで以上に重要になります。サーバー側のレンダリングのおかげで、NextJSはこの点でも際立っています。
Webサイトを構築する場合
、アプリケーションのサーバー側レンダリングにより、クライアントがデバイス上でレンダリングする必要がなくなります。遅いデバイスのユーザーの場合、これにより起動時間が速くなる可能性があります。
Create-React-Appはいつ使用する必要がありますか？
ゲートアプリケーションを構築する
場合アプリケーションが認証されたユーザーのみにアクセス可能である場合、サーバー側レンダリングの利点のほとんどが失われます。この場合、CSRアプリケーションは正常に機能し、ホストが簡単で安価です。
Webアプリケーションを構築する場合、
Webアプリケーションは通常、サーバー側のレンダリングによるメリットが少なくなります。通常、これらのアプリケーションはユーザーによって再利用され、キャッシュを適用して、SSRのコストと手間をかけずに超高速のロードを提供できます。
この記事が、NextJSとCreate-React-Appが次のプロジェクトに適しているかどうかを判断するのに役立つことを願っています。これらのツールはどちらも、Reactアプリを構築するのに非常に便利です。勝者を選択することはできません。NextJSを使用する方がよい場合もあれば、Create-React-Appを使用する方がよい場合もあります。