iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
自我挑戰組

海邊囝仔帶阿公阿嬤一起學 Ruby On Rails 系列 第 4

Day-4: SSR 與 SPA

SSR — Server Side Rendering 伺服器渲染

服務器端渲染 — 在服務器(Server)上將客戶端或通用應用程序渲染為 HTML。

/images/emoticon/emoticon06.gif


SPA —single-page application 單頁應用

SPA導致SEO(搜尋引擎最佳化)變差,會先渲染網頁內容,
後續的操作會交給 JavaScript, 雖然使用者一樣能夠享受SPA帶來的爽度!不用換頁的好處
不過在第一次的載入中,會較慢,在開發的時候也需要搭配後端技術,來解除這個缺點!


利用AJAX 非同步的特性跟後端同步資料,
將不同的資料動態輸向同一個頁面,達到網頁操作不換頁,
來與使用者互動,而非傳統從伺服器重新載入新頁面,

這時候你肯定會問!為什麼要用這種方式呢?來!聽我娓娓道來…

這種方法是為了避免頁面之間的切換打斷使用者的體驗,
著手使用起來更像一個桌面應用程式。


在單頁應用中,除了第一次是全頁下載,之後都是部分更新!!!
(你沒看錯,就是如此機靈!!不過,因為第一次看SPA網站的時候,
下載的東西會比較多,所以速度會比較慢,但後面幾次互動都會很快,因為請求的資料變少了!

所有的code(HTML、JavaScript和CSS)都會通過單個的頁面載入,
或回應使用者操作時將動態裝載適當的資源且加入到頁面裡!
頁面在過程中的任何時間都不會重新載入,也不會將控制轉移至其他頁面上,
都會在這頁面解決。


舉個例子,大家應該都用過gmail吧!!!!
相信在收發現間過程中,都能感受到使用上的順暢,
是的,就是通到大腸的那個順暢感 ! 順拉!(碰杯!!!
當你在撰寫信件,或者收信時,都不會感受到畫面的跳動,
就是那不注意的一小下!那令眼睛毀花的一小下,真的粉北送!!
而沒有那一小下,就是所謂單頁應用的特色!
當你在頁面按另一封郵件的時候,SPA網頁只會換掉郵件內容,
並把這封郵件變為已讀的icon,網頁中其他的東西都沒有動過,
這有傳輸資料就很少,因為他不是整頁換掉,速度就會快很多,用起來就是
/images/emoticon/emoticon81.gif


BUT ,沒錯!就是那個把特!
如果將SPA這個做法用到部落格,就會出現問題囉!
還記得上面提到的,他第一次下載是一個沒有實際內容的框架,
這個就會被爬蟲讀取,所以…對網站的搜尋器來講,
這一頁的網頁就是一個框架的空殼,
爬蟲也不一定會等Javascript抓回實際內容過程,
也就是說你的網頁在搜尋結果上是沒有辦法出現,
自然你的搜尋流量就打水漂拉~就算真的有讀取,
也不能保證能100%讀取,
對SEO(搜尋引擎最佳化)非常不友好啊~

所以該選擇什麼呢?小朋友才做選擇拉(拍肩)/images/emoticon/emoticon49.gif

SPA的優點:

  • 速度快
  • 能夠離線使用

SPA的缺點:

使用者操作太快,前端就不能保證每次都能得到正確的 Server 資料
(例子:點進商品 A → 快速按上一頁 → 快速點進商品B → 畫面顯示商品 A 資料)

  • 內容由 JavaScript 動態產生,瀏覽器載入並且執行 JavaScript、等 Response 回傳後才會看到畫面,因此SEO表現較差。

程式新手,我是麻瓜,每天一點一滴學習,雖然跑不快!
但認真!感謝您的收看!
明天見~嘻
/images/emoticon/emoticon42.gif

參考資料:維基百科


上一篇
Day-3: Rails的Route + MVC架構
下一篇
Day-5 :阿公阿嬤都看得懂的前後端分離架構?
系列文
海邊囝仔帶阿公阿嬤一起學 Ruby On Rails 30

尚未有邦友留言

立即登入留言