CSR SSR SSG

contributed by < steven1lung >

CSR

在沒有CSR 之前，我們的 HTML 檔會通常都會被一大堆 element 所塞滿，但是有了 CSR 後，現在的 HTML 檔案只會放入一個 tag 來裝我們的 script.

<html>
  <head></head>  <body>
    <div id="root"></div>
    <script src="./script.js"></script>
  </body>
</html>

之後將一個頁面的元素都交給 React 去渲染然後塞進容器裡。這樣可以達到減少檔案大小的作用，原本都需要準備很多 HTML 檔案，現在可以透過 router 決定要選染哪些元素在畫面上。

但是 CSR 有一個缺點，SEO 是許多企業網站非常看中的指標，而 SEO 很大一部份就是靠爬蟲去爬 HTML 檔案的資料，但是因為我們使用了 CSR，造成 HTML 裏面只有一兩個 tag，所以會使 SEO 分數低落。

SEO : Search Engine Optimization

SSG

Static Site Generation 是在伺服器端就渲染好頁面，之後回傳這個 HTML 給使用者。優點就是之後的 request 都可以共用這個 HTML。但因為他較好的快取機制，缺點也很明顯，任何資料都是 build 時候就設定好的，所以對需要經常變化的網頁來說不吃香。

SSR

而 SSR 跟 SSG 一樣需要在伺服器就需要建立好 HTML 並且回傳，但不同的地方就是不會對每一個頁面的 request 都重新去抓取。每當有使用者發出請求時，伺服器會建立對應的資料，建好 HTML 且回傳。