iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
3

什麼叫做 SSR?

Server-Side Rendering,頁面由後端渲染,HTML由後端產生

 
 
傳統做法整頁HTML不就完全由後端產生嗎?

使用後端框架的 View 及 Template,例如

  • Rails 之於 erb、haml、slim
  • PHP 之於 twig、blade
  • Node.js 之於 ejs、Jade等
     
     

為了多榨點效能 Performance,增加互動性 User Experience

前端框架開始幫忙分擔後端渲染的重任,這時頁面初始值可能透過後端 View 塞,漸漸將渲染放到前端,後續操作透過 API

 
 

為了多點維護性 Maintainance

接著,為了切開畫面與資料邏輯,此時後端完全 API 化,渲染完全靠前端
演變成現今熟悉的 SPA,純粹 Client-Side Rendering F2E價值++

 
 
移到前端渲染,跟著出現新的問題

  • SEO (Search Engine Optimization)
  • SMO (Social Media Optimization)
  • 起始延遲 (Initial Latency) / 起始讀取時間 (Initial Load Time)
    畢竟得等 js 讀完跑完,抓完API再渲染完

雖然你也能透過 JS 修改 <head>,增加額外資訊
問題 Crawler 不跑 JS,看不到你改的 <meta> 或其他對應 SNS 的 HTML Tag

有幾種搞法讓 Crawler 看得到:

  • 讓後端語言呼叫v8,餵SPA頁面、部分CSR頁面,抓取其渲染完成的 HTML
  • 靠 Headless Browser 跑 JS,抓取其渲染完成的 HTML
  • 有第三方服務專門針對 Crawler 餵渲染好的靜態頁面
    例如 prerender
  • Pre-rendering 事先編成靜態頁面

Google 曾嘗試爬 AJAX 頁面,但現在可說放棄
那時候還替 SPA 訂了個專用符號 #!

問題總是要解決

人總是會愈來愈貪心
跟你夾蒙古烤肉一樣

身為需求方

不知道哪個重要就都做吧!

  • 效能++
  • 互動性及使用體驗++
  • 支援 SEO
  • 支援 SMO
  • 最好秒開頁面

身為開發者

那我們能不能前後端寫同一種語言 - JavaScript?

於是 Airbnb 提出了 Universal Rendering

那能不能用我熟悉的前端框架當樣板呢?

於是有了 Next / Nuxt,下一集來介紹 Nuxt


上一篇
01. Nuxt.js 小跑起步
下一篇
03. Nuxt.js 怎麼處理 SSR 問題?擔任什麼角色?
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言