NextまたはGatsby vs Create React Appなどの反応フレームワークを使用する場合
私は、React/javascript学習体験のラピッドプロトタイピングフェーズにいます。 Next.jsやGatsby.jsなどのフレームワークと標準のCreate React Appをいつ利用するのか、疑問に思っていました。
Next.jsのリンクをプリロードするためのページベースの構造化と見込みを実際に調べます。しかし、CRAに任命されたとして、またはCRAを排除したとしても、いつNextに到達するかはわかりません。
ありがとう！
私は同じ船に乗っています。私はCRAから始めて、SPAを作成しました。これは最初から学習曲線を乗り越えるのに最適でした。しかし、すぐに2つの重要な問題に気付きました。
- ソーシャルネットワークでの共有：ルートごとにOGPタグを変更できませんでした。その効果は、ソーシャルネットワークで共有された場合、基本ルート（OGPタグで正しくセットアップされた）のみがカード（Twitter用語）を作成できることです。共有した他のルートは基本的に空白として表示されます。これはFacebookとLinkedInにも当てはまります。 here を参照してください。
- 検索エンジン最適化：インデックス作成のためにSPAを正しくクロールできる検索エンジンに関する記事はほとんどありませんが、私の経験では満足できるものではありませんでした。例えばGoogleでは、ホームページのみがインデックスに登録されており、正しく解析されないことに気付きました。個別の要素から個別のタイトルが連結されます。 Bingは、インデックスを作成していないようです。 GoogleのSearch Consoleを使用してホームページのインデックスを作成したため、Googleがインデックスを作成した可能性があります。新しいページごとに手動でインデックスを再作成する必要がある場合、またはページの更新後に実行可能なソリューションではありません。
Create-React-App：SPAの作成を始めるのに非常に優れたブートストラップツールです。
Gatsby/React-Static：Create-React-Appに似ていますが、代わりにHTMLビルド出力を生成するため、「事前レンダリング」されます。私はまだこれを実験していません。静的サイトサーバー（S3/Azure Blobs/Githubページ）から提供されているHTMLに異なるOGPタグをローカルで変更するのではなく、すでに持つことができるので、これにより（1）および（2）が解決されることを期待していますフェッチ。これがまだ機能するかどうかはわかりません。ここで追加された利点は、Gatsbyがビルド時に既にプリレンダリングされるため、ユーザーのパフォーマンスが向上することです。 （Gatsbyの経験がある人が明確にできるか、完了したらこの回答を編集します。）更新（2018年2月19日）：（1）が静的としてホストされている間にGatsby.jsによって解決されていることを確認できますウェブサイト。
Next.js：Gatsbyが（1）と（2）を解決しない場合、Next.jsが完全なSSRアプリを作成するためのフォールバックになります。ここでの問題は、静的なサイトホスティングサービス（Azure Blob、AWS S3、Github Pages）ではなく、PaaSを使用してサイト（Azure Web Apps、AWS ElasticBeanStalk、Herokuなど）をホストする必要があることです。これはわずかにコストがかかり、CI/CDパイプラインをセットアップするための作業が少し増えます。
CRAのドキュメントにリストされている これらの代替 も参照してください。
最近、このトピック、特にcreate-react-appとGatsby.jsについて多くの調査を行いました。両方のツールを使用すると、セットアップについてあまり心配することなく、すぐに反応コードを記述できることがわかりました。ただし、たとえばGatsbyは、SEOに不可欠なビルド時のサーバー側レンダリングを提供しています。ビューをレンダリングするのにサーバーは必要ありません。これは、ビルド時に既に行われているため、Next.jsの場合です。ユーザーがWebサイトにアクセスすると、HTMLバージョンが最初にロードされ、javascriptがロードされると、Webサイトは完全に機能する反応Webアプリになります。
良い点は、すべてが同じビューレイヤーを共有しているため、あるツールから別のツールに移動できることです。 create-react-appからGatsby.jsに移行 で確認できます。
私は自分でこの研究を行っています。私の理解では、Next.jsはすぐにサーバー側レンダリングを提供します。 Create React Appはこれを行いませんので、SSRに独自のソリューションを提供する必要があります（より高速なページ読み込みやSEOなど）。