1. ホーム
  2. reactjs

[解決済み] NextJsとCreate React Appの違いについて

2022-03-01 19:52:18

質問

との違いを知りたいのですが。 ネクストジェイズ Reactアプリの作成 . を使ったフロントエンド・アプリケーションの開発を容易にするために存在することは知っています。 ReactJs .

Googleでいくつかの記事を探ってみたところ、主な違いとして

NextJsはサーバーサイドレンダリング(SSR)を提供し、Create React App クライアントサイドレンダリング(CSR)を提供し、SSRはそのパフォーマンスを向上させます。 アプリケーションの読み込み

しかし、開発の観点から他のパラメータについてはどうでしょうか?

NextJSやCRAで開発したWebアプリの保守性やスケーラビリティは?

TypescriptとReact Hooks/Reduxのサポート ?

あるいは、私が間違った比較をしているのであれば、私を指導することもできるのですね。

解決方法は?

私はNextJsとCRAの両方を使ったことがあります。これらのフレームワークはどちらもすぐに使い始めることができ、良い開発者体験を提供します。しかし、このどちらにも、どちらかがより良く輝くユースケースがあります。そのような要素を踏まえて、比較してみたいと思います。追加ポイントやコメントなど、編集の提案はご自由にどうぞ。

サーバーサイドレンダリング

<テーブル CRA Next.js CRAはSSRを最初からサポートしていません。
ただし、設定することは可能です。
ただ、お好みのサーバーと構成でSSRをセットアップする手間がかかります。開発チームでは、近い将来にこれをサポートする予定はありません。彼らは 他のツールをお勧めします を使用することができます。 NextJsは SSRの種類 . SSRをそのままサポートしています。
* 静的生成:ビルド時にデータを取り込みます。ブログや静的なWebサイトのようなユースケースに最適です。
* サーバーサイドレンダリング:データを取得し、リクエストごとにレンダリングします。 ユーザーごとに異なるビューを提供する必要がある場合、これを行う必要があります。

設定可能性

私は、これらのツールが非常に異なっており、あなたの決定は、この要因に依存することができる点であると思います。

<テーブル CRA Next.js Create React Appは、設定する余地があまりありません。
webpackのconfigのような設定は、以下の場合でなければ変更することができません。
通常のCRAの方法(イジェクト、リスクリプト、リワイヤリング、クラコ)から外れている場合。
で設定されているものを基本的に使用することになります。
react-scripts という、CRAの核となる部分です。 ほとんどすべてのものが コンフィギュラブル .
例を確認すると NextJsのテンプレート のようなファイルを見ることができます。
babelrc , jest.config , eslintrc その他
を設定することができます。

メンテナンス性

<テーブル CRA Next.js CRAは非常に意見が多い。
CRAのリリースを常にアップデートしていれば、メンテナンスは難しくない。 NextJsもよくメンテナンスされています。定期的にアップデートをリリースしています。

タイプスクリプト

<テーブル CRA Next.js アウトオブボックスに対応。CRAアプリをtypescriptで初期化するには、以下のようにします。
npx create-react-app my-app --template typescript タイプスクリプトをサポート アウトオブザボックス
でタイプスクリプトの設定を開始します。 touch tsconfig.json

フック対応

CRA、NextJsともに最新版では、フックに対応したバージョンのReactがインストールされています。また、簡単に最新版にアップグレードすることができます。


Redux対応

Reduxは、これら2つのツールで使用できるライブラリです。