【亂亂寫筆記】Nuxt(SSR) - 從部屬了解Server Side Render－文科少女學程式

平常都是接觸Vue、React這些CSR的框架，SSR只有透過近期的讀書會稍微了解它的概念，本來以為自己應該差不多理解什麼是SSR了，直到最近要進一步處理nuxt3專案的部屬流程，才發現自己根本沒搞懂啊！這次想說就稍微記錄一下，近期透過規劃nuxt專案部屬流程，所進一步了解到的SSR。

從Nuxt3專案的部屬理解SSR
什麼是SSR？
SSR是Server Side Render的縮寫，用中文來看的話，也就是「伺服器渲染」。有別於「客戶端渲染(CSR)」，HTML的編譯是交由server處理，而不是交由client處理。所以當使用者點進網頁發送request需求後，server會返回完整的HTML內容，而不會像CSR一樣，是一個空白的HTML頁面，需要透過client，才能把頁面內容渲染出來。

SSR頁面產生流程
使用者對server發送request => 在server端fetch資料 => server產生並回覆完整的HTML =>下載所有JavaScript => 將event Handlers綁定到DOM上(Hydrate) =>Hydrate完成後，使用者就可以和頁面互動(點擊頁面才會有反應)

一般Vue專案部屬和Nuxt專案部屬的差異
Vue(CSR)部屬的狀況
以目前我接觸的部屬流程來看的話，Vue專案的部屬流程會是：
專案build => build好的檔案放到nginx server(目前公司是用nginx)
*使用者進網頁時，對nginx server發送request
Nuxt(SSR)部屬
專案build => build好的檔案放到container => 透過start或node啟動nuxt server
*使用者進到網頁時，對nuxt server發送request

由此可以理解到SSR的server有別於一般CSR的server，而且是因為Nuxt框架(Next也是差不多的概念)有幫我們把node server的部分設置好，所以才讓SSR的機制更便利的呈現，如果要自己徒手呈現SSR機制就會比較麻煩。