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

7214 ワード
TIL vue.js テキストリンク

1.クライアント側レンダリング（CSR）

다 그려져 있지 않은 HTML페이지를 브라우저에서 받고 프런트엔드 프레임워크(앵귤러, 뷰, 리액트)와 같은 
자바스크립트를 이용하여 나버지 부분을 그리는 것을 의미한다. 
<html>
 <head>
   <title>Vue client Side Rendering</title>
 </head> 
 <body>
   <div id="app">
     {{ message }}
   </div>
    
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
   <script>
     var cmp = {
       template: `<ul><li>item1</li><li>item2</li></ul>`
     };
     
     new Vue({
       el:'#app',
       data: {
         message: 'Hello Vue.js!'
       },
       components: {
         'list-component' : cmp
       }
     });
   </script>
 </body>
</html>

  • サーバに送信されたHTMLファイルを受信すると、ブラウザはこのHTMLファイルを画面にロードし、ビューフレームワークを使用してインスタンスを生成します.
  • <ul>タグと<li>タグをテンプレート属性として生成し、画面に貼り付けます.

    (利点)バックエンドから必要なデータのみを取得し、サーバ負荷を軽減します.
    (欠点)jsファイルのダウンロードは、初期アクセス速度が遅くなる可能性があります.
    SSRに比べてSEO(検索エンジン最適化)は脆弱です.

    • 2.サーバ側レンダリング（SSR）

    완벽히 그려진 HTML페이지를 브라우저에서 받는 것을 의미한다. 
    <body>
 <div id="app">
   Hello Vue.js!
   <ul>
     <li>item1</li>
     <li>item2</li>
   </ul>
 </div>
</body>
  • サーバからブラウザにHTMLファイルを渡すと、画面に表示されるテキスト値と<ul><li>タグが完璧に描かれています.
  • ブラウザはファイルを表示するだけで、個別のJavaScriptを使用してスクリーンレンダリングする必要はありません.

    • (利点)CSRの初期画面よりもレンダリング速度が速い.
    (欠点)クリックするたびに他のリクエストが発生するたびに、不要な部分が再レンダリングされ、サーバ負荷などの問題が発生します.
    CSS画像最適化
    私は同じ数字が好きではありません.