[CS] AJAX, SSR, CSR, CORS Day-28

AJAX?

JavaScript、DOM、Fetch、XMLHttpRequest、HTMLなど多くの技術を含むWeb開発技術.
AJAXの最大の特徴は、ページを表示するためにページに必要な部分のデータを非同期で受信することです.

AJAXの2つの重要な技術

AJAXを構成するキーテクノロジーはJS、DOM、Fetchです.
fetchでは、ページを移動することなく、サーバから必要なデータを受信できます.fetchは、ユーザが現在のページで動作している間にサーバと通信することを可能にする.(非同期)
サーバから必要なデータを取得すると、新しいページをスクロールすることなく、既存のページに必要な部分を追加(変更)するだけです.(スクロール例)

XHRとfetch

最近、fetchはXHRよりもよく使われています.
(fetchが現れる前に使用していたのはXHRです.)
ex)

// Fetch를 사용
fetch('http://kakao.gg/messages')
	.then (function(response) {
		return response.json();
	})
	.then(function (json) {
		...
});

AJAXのメリット

HTMLページを作成して送信する必要はありません.AJAXを使用する場合、完了したHTMLをサーバから送信する必要がなく、必要なデータを非同期でインポートし、ブラウザ画面の一部を更新してレンダリングできます.

一部のみレンダリングされるため、高速でインタラクティブなアプリケーションを作成できます.

AJAXは、必要なデータのテキストフォーマット(JSON、XMLなど)を送信するだけなので、データ量が少ない.

AJAXの欠点

検索エンジン最適化(SEO)は不利です.これは、データの一部しか消去されないため、サイト情報を消去することが難しいためです.

戻るボタン...一般ユーザーは適応できないかもしれませんが、これは問題ではありません.人は慣れる...

SSR?

サーバ側レンダリングの略で、ブラウザでWebページをレンダリングするのではなく、サーバでレンダリングします.ブラウザがGET要求をサーバに送信すると、サーバは指定したWebファイルをブラウザに送信します.ブラウザに到達すると、完全にレンダリングされます.

SEO優先.

最初の画面をすばやくレンダリングする必要がある場合は、を使用します.

クライアントとサーバの間のインタラクションは少ない.

CSR?

クライアント側復元の略語はSSRとは逆である.クライアントはページを表示します.通常はCSRです.クライアントが要求を発行すると、サーバは応答し、材料を受信して提示します.

クライアントは、サーバに大量のリクエストを送信するために使用されます.高速ルーティングは強力なUXを提供します.

SSRとCSRの違い

主な違いは、ページのレンダリング位置です.SSRはサーバ上でページをレンダリングし、CSRはクライアントでページをレンダリングします.

CORS (Browser Seurity Model)

CORS:異なるOrigin間でリソースを共有する;ブラウザがユーザーを保護する策略
すべての条件を満たす必要があり、GET、HEAD、POSTの条件を満たす必要があります.
他のコンテンツを手動で追加すると拒否されます.