CSR SSR SSG - HackMD

--- tags: Frontend --- # CSR SSR SSG contributed by < [steven1lung](https://github.com/steven1lung) > ## CSR 在沒有CSR 之前，我們的 HTML 檔會通常都會被一大堆 element 所塞滿，但是有了 CSR 後，現在的 HTML 檔案只會放入一個 `tag` 來裝我們的 script. ```htmlembedded <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 且回傳。