[Frontend] CSR vs. SSR

結論から...

どちらがレンダリングの準備をしていますか?

SPAとMPA

CSRとSSRを説明するためには、まずSPAとMPAに言及することが望ましい.
MPA

複数ページアプリケーションの略

要求ページ変更>ページ全体の再表示

受信
SPA

単一ページアプリケーションの略

要求ページ変更>必要な部分のみに応答して部分をレンダリングし、

整理するとSPAとMPAの違いは全体的にレンダリングされますか?一部の応答のみを受け入れてレンダリングしますか?このような違いと言える.
SPAとMPA/CSRとSSRの関係は何ですか?
勉強する前に、これは共通の言語だと思います.区別して使う用語ではありません.

差異

SPA、MPA>ページ組織/SRS、CSR>レンダリング

リレーショナルポイント

SPAは、変更が必要な場合には、その部分の内容を要求してJSONとして受信し、JSによって部分を変更する方法に従うため、クライアントでCSRを用いてレンダリングするのが自然である.

MPAは、レンダリングされたリソースを受け入れるページ全体を変更できます.したがって、サーバ側でレンダリングし、すべての静的リソースを返すSSR方式が採用される.

CSRとSSR

Client Side Rendering

ちくじず
1.ユーザー:Webサイトへのアクセス
2.Browser:サーバにコンテンツを要求する
3.サーバ:空のスケルトンを持つHTML、リンクに応答するJSコード
4.Browser:JSのダウンロード/動的DOMの作成
メリットとデメリット

の利点

ページ変更時の起動速度がより速い

サーバ低負荷

ユーザーエクスペリエンス高

の欠点

初期負荷速度が遅い

検索エンジンの最適化は不利で、Web Chrollerは空洞なHTMLに注目しているだけで、何の情報も取得できません.

Google botはjsを読むことができますが、他のbotではありませんので、SEOの重要なページにはSSR、

を採用することをお勧めします.
Server Side Rendering

ちくじず
1.ユーザー:Webサイトへのアクセス
2.Browser:リクエスト内容
3.サーバ:レンダリングされたHTML、JSコード応答の準備
4.Browser:HTMLレンダリング、JSコードダウンロード/JSロジックをHTMLに接続
メリットとデメリット

の利点

初期運転速度がより速い

すべてのデータがHTMLに含まれているため、検索エンジン

を最適化することができる.

の欠点

負荷中に何の反応もない

ページを変更すると、サーバ負荷が

増加します.

CSR/SRR比較

CSR > SSR
勉強しているうちに感じたのは、CSRをよりスタイリッシュに受け入れる雰囲気で、ユーザー体験をより重視した今にふさわしい方法だと思います.しかし、CSRのメリットとSSRのメリットを両方利用する方法はありますか?CSRの長所の中でSSRの長所がありますか?という考えが生まれた.
CSR + SSR
非専門家が学習の中で感じているのは、他のユーザーもすでに感じているので、すでに提供されているツールがあることです.

Express
Node.jsに関連付けられたフレームワークではありませんが、CSRとSSRのライブラリを同時にサービスできます.ライブラリのように自由度が高いのですが、難点は進入障壁が高いことです.

NEXT.js
反応に関連するフレームワーク.各ページはCSRとSSRを選択して連動させる.

Universal
角度に関連付けられたフレーム.初期は角度と単独駆動に分けられていましたが、今は角度と合わせて角度を使えばダウンロードしなくてもいいようになりました.

NUXTJS
vueに関連するフレームワークが他のフレームワークを提供することにヒントを得て、サポートを開始します.

reference

우아한 Tech, YOUTUBE, [10분 테코톡] 신세한탄의 CSR&SSR, https://www.youtube.com/watch?v=YuqB8D6eCKE&list=PLgXGHBqgT2TvpJ_p9L_yZKPifgdBOzdVH&index=22