[解決済み] 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サイトのようなユースケースに最適です。
* サーバーサイドレンダリング:データを取得し、リクエストごとにレンダリングします。 ユーザーごとに異なるビューを提供する必要がある場合、これを行う必要があります。
ただし、設定することは可能です。
ただ、お好みのサーバーと構成でSSRをセットアップする手間がかかります。開発チームでは、近い将来にこれをサポートする予定はありません。彼らは 他のツールをお勧めします を使用することができます。 NextJsは SSRの種類 . SSRをそのままサポートしています。
* 静的生成:ビルド時にデータを取り込みます。ブログや静的なWebサイトのようなユースケースに最適です。
* サーバーサイドレンダリング:データを取得し、リクエストごとにレンダリングします。 ユーザーごとに異なるビューを提供する必要がある場合、これを行う必要があります。
設定可能性
私は、これらのツールが非常に異なっており、あなたの決定は、この要因に依存することができる点であると思います。
<テーブル
CRA
Next.js
Create React Appは、設定する余地があまりありません。
webpackのconfigのような設定は、以下の場合でなければ変更することができません。
通常のCRAの方法(イジェクト、リスクリプト、リワイヤリング、クラコ)から外れている場合。
で設定されているものを基本的に使用することになります。
例を確認すると NextJsのテンプレート のようなファイルを見ることができます。
を設定することができます。
webpackのconfigのような設定は、以下の場合でなければ変更することができません。
通常のCRAの方法(イジェクト、リスクリプト、リワイヤリング、クラコ)から外れている場合。
で設定されているものを基本的に使用することになります。
react-scripts
という、CRAの核となる部分です。
ほとんどすべてのものが
コンフィギュラブル
.
例を確認すると NextJsのテンプレート のようなファイルを見ることができます。
babelrc
,
jest.config
,
eslintrc
その他
を設定することができます。
メンテナンス性
<テーブル
CRA
Next.js
CRAは非常に意見が多い。
CRAのリリースを常にアップデートしていれば、メンテナンスは難しくない。 NextJsもよくメンテナンスされています。定期的にアップデートをリリースしています。
CRAのリリースを常にアップデートしていれば、メンテナンスは難しくない。 NextJsもよくメンテナンスされています。定期的にアップデートをリリースしています。
タイプスクリプト
<テーブル
CRA
Next.js
アウトオブボックスに対応。CRAアプリをtypescriptで初期化するには、以下のようにします。
でタイプスクリプトの設定を開始します。
npx create-react-app my-app --template typescript
タイプスクリプトをサポート
アウトオブザボックス
でタイプスクリプトの設定を開始します。
touch tsconfig.json
フック対応
CRA、NextJsともに最新版では、フックに対応したバージョンのReactがインストールされています。また、簡単に最新版にアップグレードすることができます。
Redux対応
Reduxは、これら2つのツールで使用できるライブラリです。
関連
-
[解決済み] nginxでcertbotを使用する際の問題点
-
[解決済み] コンストラクタとngOnInitの違いについて
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] npxとnpmの違い?
-
[解決済み] Reactのstateとpropsの違いとは?
-
[解決済み] React / React Nativeでコンストラクタを使用する場合とgetInitialStateを使用する場合の違いとは何ですか?
-
[解決済み] Reactでes6クラスを使うときの「super()」と「super(props)」の違いとは?
-
[解決済み] create-react-appベースのプロジェクトを実行するためのポートを指定する方法は?
-
[解決済み】create-react-appでテンプレートが提供されない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】コンポーネントの定義に表示名がない react/display-name
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには?
-
[解決済み] React の open mailto E-Mail クライアントの onClick で textarea から本文を取得する。
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] reactのuseStateフックでコールバックを使う方法 [重複]。