09-16-2021

本章內容

• SSR|CSR 你們是誰？
  • SSR (Server-Side Rendering)
  • CSR (Client-Side Rendering)
• 知道了然後呢？他們之間的差異帶來的衝擊！
  • SEO問題浮現
  • 預渲染的形式
  • 哪一個才好呢？

SSR|CSR 你們是誰？

百聽不聞其解，到底什麼是SSR，以及什麼是CSR呢？
簡單的來說，這兩者之間的差別僅在於是誰渲染資料，是前端？還是後端？

SSR (Server-Side Rendering)-伺服器渲染

SSR (Server-Side Rendering)是與後端工程師合作方式，由後端（server端）渲染資料+由前端做好HTML繪製出完整的頁面後，提交給後端變成==動態語言==，又稱為動態渲染，針對每次的請求都會生成HTML頁面。

CSR (Client-Side Rendering)

CSR (Client-Side Rendering)，與後端工程師合作方式為，後端提供前端API資料+由前端渲染資料前端依照API列表設計網頁頁面!

知道了然後呢？他們之間的差異帶來的衝擊！

SEO問題浮現

看似簡單輕量的設計，但其中藏著對商業網站來說更嚴重的隱憂-「SEO」的分數問題。
如果當我們的HTML頁面中的內容都是在容器中，其他的內容生成是靠著JS動態產生的，那麼當爬蟲在爬取網站資料的時候，就只會爬到ㄧ個空蕩蕩的網頁，幾個小貓標籤而已。

通常使用預渲染的方式，就有機會解決這個問題，指的是在資料送到client之前就把HTML頁面渲染出來了。
Next的預設情況就是提前渲染頁面並生成HTML，那麼就不會是全部由client的Javascript去完成頁面，同時也能帶來更好的性能與SEO。

預渲染的形式

在Next.js中分為:靜態生成、SSR生成
靜態生成Static Generation (Recommended): HTML在build的時候生成，並可以在每個請求中重用，如果使用靜態生成一定要export畫面，就可以在client發出請求之前預先渲染畫面，也可以與client端一起引入其他的數據。

SSR、CSR哪一個才好呢？

看到這裡，其實就是各有優缺點，視專案的複雜程度來選擇會比較妥當啦！