サーバ側レンダリング(SSR)、クライアント側レンダリング(CSR)

サーバ側レンダリング(SSR)

Webページに接続するとき、クライアントがサーバに要求すると、viewがサーバから画面にロードされて出力される従来の方法.したがって、最初のロード速度は非常に速いが、jsファイルを受信するまでインタラクションに反応しない.

長所

検索エンジンの最適化(SEO)
サーバがWeb上の情報を一度に受信するため、検索エンジンはWeb上の情報を読み取る際にエラーが発生しません.

性能向上
サーバはhtmlをクライアントに渡すため、初期ロード速度が速い.

短所

移動するたびに更新されるので画面が点滅します.

サーバは、1ページあたりの転送が必要なデータが格納されているため負荷が発生する場合があります.

初期htmlロードは速いがjsを受信するまでインタラクションができないという欠点がある.

クライアント側提示（CSR）

CSRは、ビューをサーバに直接レンダリングするのではなく、htmlを先にレンダリングし、js、その他のリソースファイル(fetchなど...)をレンダリングします.ダウンロードしてブラウザでレンダリングする方法.初期のWebページの表示には時間がかかりますが、レンダリング後は直接インタラクティブになります.

長所

SPA
Reactionのように1ページだけロードし、仮想ドームを使用して必要な部分を再読み込みし、サーバ上で特定の部分のデータのみを受信します.不要なページ全体をレンダリングしません.

再ロードを必要とせずに迅速なインタラクションが可能.

短所

検索エンジンの最適化が難しい
viewを生成するにはjsが必要です.しかし、jsは、読み取る前に情報のないhtmlを読み取るため、ページが持つ情報を知ることができず、データ収集が困難である.
検索エンジンの最適化がうまくいかなければ、検索中に私のサイトが表示されず、ユーザー数が減少します.

整理する

▼SSRはサーバからviewをサーバにレンダリングし、クライアントが受信するため、最初のロードは非常に短い.しかし、jsを適用する前に、インタラクションに反応しません.
CSRはサーバからjs、リソースファイルを受信してレンダリングするため、最初のロードには時間がかかります.SEOがあまり良くない(空html読み)

Next.なぜjsを使うのか

CSRの欠点は、レンダリングを必要としないため、SEOを行うことが難しいことです.安全のため、次のステップはSPAが簡単にSSRを実現するのを助けることです.jsです.応答でSSRを独自に実現することも可能であるが,開発環境を作成するためには複雑なプロセスが必要であるため,Next,jsを用いる.
リアクターでは、素子Dマウント関数でデータを取得して再レンダリングする必要があります.でも次は.jsはgetInitialProps()という関数でまずデータをインポートし、次にレンダリングします.

インストール

npm install next react react-dom
# or
yarn add next react react-dom

package.jsonに次のスクリプトを追加します.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

dev-next dev開発モードでの次のステップ.jsの実行を開始

build運用next build生産構築アプリケーション

startnext start-Next.js本番サーバの稼働開始

コード剥離

通常の反応単一ページでは、初期レンダリング時にすべてのコンポーネントが低下します.しかし、規模の拡大と容量の増大に伴い、負荷速度が遅くなる可能性がある.Next.jsはこれらの問題を改善し、必要に応じてファイルをロードし、コード剥離を使用して複数のファイルを分離することができます.
Pageフォルダにはいくつかのルーティングがあり、最初のページIndex Pageが先に読み込まれ、別のページをめくったときに読み込まれます.