SSR vs CSR

4883 ワード
テキストリンク

SSR( Server Side Rendering)



特長


ブラウザではなくサーバでWebページをレンダリングします.
ブラウザがGET要求をサーバのURIに送信すると、サーバは指定したウェブファイルをブラウザに送信する.サーバー上のWebページがブラウザに到達すると、完全にレンダリングされます.
Q)Webページを閲覧しているユーザーがブラウザの別のパスに移動したらどうなりますか?
A)ブラウザが別のパスに移動するたびに、サーバーはこの操作を再度実行します.

SSR使用例


  • 検索エンジンの最適化がプリファレンスの場合、通常はサーバ側レンダリングが使用されます.

  • Webページの最初の画面をすばやく表示する必要がある場合でも、単一ファイルサイズのSSRが適しています.

  • ウェブページとユーザとのインタラクションが少ない場合は、SSRを利用することができる.
    • 例
  • NAVERブログ
  • The NewYork Times
    理由:初期ロード速度が速い./検索エンジンに露出することが重要です.(SEO)/ユーザとのインタラクションが少ない
    • const express = require("express");
const app = express();

const infoArr = [
  "csr과 차이점이 느껴지나요?",
  "ssr이란?",
  "HTML은 어디서 조작될까요?",
  "Server Side Rendering",
  "검색엔진 최적화(Search Engine, Optimization)에 상대적으로 유리하다.",
  "초기로딩 속도가 빠르다.",
  "TTV(Time To View)와 TTI(Time To Interact)의 시간 공백이 있을 수 있다."
];

app.get("/", (req, res) => {
  res.send(
    "<html><body><h1>" +
      infoArr[Math.floor(Math.random() * infoArr.length)] +
      "</h1><h1>SSR</h1>" +
      "<h2>Server Side Rendering이란 무엇인가?</h2>" +
      "</body></html>"
  );
});

app.listen(8080);

    CSR (Client Side Rendering)



    特長


    CSRはSSRとは逆と考えられる.
    CSRはクライアントにページを提示する.Web開発において最も代表的なクライアントはWebブラウザである.ブラウザのリクエストをサーバに送信すると、サーバはWebページを表示するのではなく、クライアントに単一のページを送信します.サーバは、JavaScriptファイルをWebページとともに送信します.
    クライアントがWebページを受信すると、Webページとともに渡されるJavaScriptファイルは、ブラウザで完全にレンダリングされたページに置き換えられます.
    Q)Webページに必要なデータがデータベースに格納されている場合、どうすればよいでしょうか.
    A)ブラウザは、レンダリングのためにデータベースに格納されたデータをウェブページにインポートする必要がある.
    このため、APIが使用されます.
    APIリクエストにより、Webページのレンダリングに必要なデータを消去します.
    Q)最後に、ブラウザが別のパスに移動したらどうなりますか?
    A)CSRはSSRと異なり,サーバはウェブページを再送信しない.ブラウザは、ブラウザが要求したパスに基づいてページを再表示します.このとき、最初のサーバから送信されたページファイルと同じファイルが表示されます.

    CSR使用例


  • SEOが優先度でない場合、CSRを使用できます.

  • サイトに豊富なインタラクティブコンポーネントがある場合、CSRは高速ルーティングによって強力なユーザー体験を提供します.

  • Webアプリケーションを作成する場合、CSRは高速ダイナミックレンダリングなど、より良いユーザー体験を提供します.

  • AGODA
    アグダだけでなく、多くの予約サイトでCSRが使われています.SSRはサーバ上でレンダリングする必要があるため、インタラクションが多ければ多いほどサーバの負担が大きくなり、CSRの負担は小さくなります.サーバはクライアントに必要なデータだけをサーバに渡すためです.高速レンダリングは、単一のページアプリケーションに基づいて画面を一部のデータのみを受信するように変更するため、ユーザー体験を向上させるのに役立ちます.
    • const express = require("express");
const app = express();
const port = process.env.PORT || 5000;

const infoArr = [
  "ssr과 차이점이 느껴지나요?",
  "csr이란?",
  "SPA를 기반으로",
  "화면의 일부만 바꿔주는 것",
  "HTML은 어디서 조작될까요?",
  "Client Side Rendering",
  "AJAX를 통해서 서버로부터 필요한 데이터만 받습니다."
];
app.get(`/`, (req, res) =>
  res.send(infoArr[Math.floor(Math.random() * infoArr.length)])
);
app.get(`/csr`, (req, res) =>
  res.send(infoArr[Math.floor(Math.random() * infoArr.length)])
);

app.listen(port, () =>
  console.log(`Example app listening at http://localhost:${port}`)
);

    SSRとCSRの違い


    CSRとSSRの主な違いは、ページのレンダリング位置にあります.
    SSRはサーバ上でページをレンダリングします.
    CSRはブラウザ(クライアント)にページを表示する.
    ブラウザは、ユーザーが他のパスを要求するたびにページをリフレッシュするのではなく、ルーティングを動的に管理します.
    開発日記21.05.07 Java
    Xcode 10: Build input file double-conversion cannot be found