從幾個React相關框架比較網站技術

最近開始學Gatsby，剛好可以用3個React相關的框架 — Create-react-app, Next.js, Gatsby.js — 來解釋：靜態/ 動態網站、Client Side Rendering/ Server Side Rendering 這幾個名詞。

網際網路的運作原理

在比較之前，先提一下網際網路的運作原理：想像你要連到某個網站，此時你的瀏覽器會向該網站的伺服器發出請求，伺服器接收到之後，會將HTML, CSS, Javascript檔案傳回你的瀏覽器，再顯示出畫面。這邊的兩個端點：你的瀏覽器，就是指client，伺服器端當然就是server。

靜態、動態網站

再來，如果今天我們看的是維基百科，網站上有一篇篇的文章，內容是固定的，這就是靜態網站。如果我們瀏覽的是新聞網，這些內容則是「動態」的顯示在我們的畫面上。動態指的是，畫面是當使用者「送出要求」後，才形成的，而不是預先寫好的，內容會依使用者、時段等等有所差異。例如當我連上臉書(對伺服器送出要求)，臉書會顯示好友們的動態，及專門對我投放的廣告，這種就是動態網站。

Client Side / Server Side Rendering

接下來，以Creat-react-app寫成的網頁，通常是Single Page App，比較強調的是與使用者互動的動態內容，例如我之前做的一個Dieta 減重熱量計算系統，在使用者填入體重、活動量後，計算出適合的熱量。這種需要高度互動性、即時反應速度快的網頁，就很適合用Creat-react-app來編寫 — HTML檔案會在「使用者的瀏覽器」上產生出來，呈現在畫面上，這就是所謂的Client Side Rendering。

但如果是一個更大型、邏輯、畫面更複雜，並且又講求使用者的體驗的動態網站，就適合用Next.js編寫，他的強項在於，伺服器可以在收到要求後，先把HTML檔案做好，送回瀏覽器，這樣瀏覽器就不需要花時間運算，提升使用者體驗，用的是Server Side Rendering的技術。(Next還有很多其他的技術，但這邊只是就主題做簡單比較)

Gatsby，用來解決靜態網站遇到的問題

但如果換一個場景，我們想做一個靜態的內容網站，例如個人部落格，裡面的內容大多是已經決定好的、且內容不會快速更新，如果還用Creat-react-app，就不是那麼適合，因為它做出的Single Page App，通常不會每個頁面有獨立的連結 — 想像你在操作一個app，是用其中的按鍵切換不同頁面，但沒辦法單純在網址列打上你要去的那一頁的網址。這樣一來還會有一個大問題：網站內容很難被google到，也就是它的SEO(搜尋引擎最佳化)不會很好。

而傳統的網頁技術，雖然沒有這個問題，但就無法享受到React技術的優點，像是高互動性、可重複使用元件等優點，來做出使用者體驗更好的網站。

因此，gatsby出現了，它也使用React技術，並解決了creat-react-app裡的routing問題，因此非常適合用來做靜態的內容網站。以部落格為例，每篇文章都會有專屬的網址，使文章內容可以被google搜尋得到。而且畫面是早在網站「建造」(build)時，HTML檔就做好了，伺服器一收到要求，就可以立即傳送到瀏覽器，因此畫面可以很快速地呈現出來。

沒有最好的，只有最適合的

老話一句，要使用哪種框架、技術來做網站，都是要看需求、場合，每個技術的出現都是用來解決特定的問題，因此，沒有最好的選項，只有最符合使用者要求的選項。