SSR vs Prerendering dochi?

EK

名詞定義

渲染

SSR(Server-Side Rendering)
CSR(Client-Side Rendering)
Rehydration
- 透過javascript在client端，產生像SSR產生HTML’s DOM tree和資料。
Prerendering
- 在client跑應用前，捕獲所有的狀態產生出靜態HTML

效能

TTFB(Time to First Byte)
- 造訪網站後，收到伺服器回應第一個位元組的時間。
FP(First Paint)第一次渲染
- 白屏到有畫面。
FCP(First Contentful Paint)首次內容繪製
- 表示瀏覽器抓取到內容顯示的時間 (article body, etc)。
TTI(Time To Interactive)可互動時間
- 表示頁面能提供完整互動功能的時間。

Server Rendering

Client端 cpu使用較少。
更快的FP和FCP，以致可以達到快速的TTI。
產生頁面在主機端需要更長時間，換來更慢的TTFB。

Static Rendering

更快的FP和FCP，以致可以達到快速的TTI。
他還改善了Server Rendering的TTFB
靜態渲染意味著每個URL對應單獨的HTML檔案，透過cdn做緩存可以達到最好的效果。
但如果每個URL的內容無法預測，或是有大量不同頁面，會影響其可行性。

Server Rendering vs Prerendering

Server Rendering 不是萬用解，他的動態特性可能會造成巨大的與算成本。
Server Rendering不能提前工作，會造成TTFB的延遲。
Server rendering 產生靜態HTML是依據URL，但一定比Static Rendering更慢。
如果同時使用 server rendering + HTML caching可以顯著的減少server render時間。

SSR(伺服器渲染)

使用
- Laravel
- Vue
- 套件
  - 套件包沒有特別說明vuex, vue-router如何使用在套件的寫法中，可以參考範例。

作法
- 透過php v8或是 node原生，在進後端route的時候在server side render，把整個完整的html return回去。
- 前端點選網址，則使用前端router做觸發。

優點
- 可以渲染即時的資料，解決SEO。
- 不會有進入時白頁問題，因為不需要在前端渲染。
缺點
- 在vue生命週期只有 beforeCreate和created會被調用到。
- server端沒有window、document，如果要算頁寬，高度等等都會GG，要做特別處理。

實例

使用vue-router，在每一頁看原始碼都是一次SSR，可以看到Vue component產生的內容，會在網頁原始碼內。

Prerender(預渲染)

使用
- Koa
- Vue
- 套件
  - prerender-spa-plugin
- 核心技術
  - puppeteer
範例
P.S. 範例沒有後端router，所以產生靜態後，重整網址後，未預渲染路徑會404，此處使用Node.js架設主機撰寫wildcard。

作法

指定需要做預渲染的Url

webpack.config.js

 new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: [ '/', '/about', '/contact'],

用node寫一個server(Koa為例)

安裝koa

 yarn add koa koa-router koa-views koa-static

撰寫koa
引用lib
./server.js

 const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const serve = require('koa-static');
const app = new Koa();

指定view的路徑與副檔名

 app.use(views(__dirname + '/dist', {
    extension: 'html'
}));

寫個router

 const router = Router();
// Router -> /
router.get('/(.*)', async(ctx) => {
    await ctx.render('index')
});

指定static folder

 app.use(serve(__dirname + '/dist'));

最後註冊router和設定port

 app
    .use(router.routes())
    .use(router.allowedMethods());
 
app.listen(8001);

SEO META怎麼辦?

裝 vue-meta-info

 yarn add vue-meta-info

以 about頁面為例
src/components/About.vue

 export default {
  metaInfo: {
    title: "About", 
    meta: [
      {
        name: "About",
        content: "About Page"
      }
    ],
    link: [
      {
        rel: "asstes",
        href: "https://assets-cdn.github.com/"
      }
    ]
  }
};

index.html

 <head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
</head>

使用webpack做SSR產生靜態頁面

 yarn build

會產生到 ./dist 資料夾

執行node

 yarn serve

此時已經將 yarn serve改寫成 node app.js
網址為 http://127.0.0.1:8001

如果Contact Page為動態資料，不能要產生靜態頁面

修改
webpack.config.js

 new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: [ '/', '/about'],

重新產生靜態頁面

 yarn build

或是我們偷懶一點，直接把 ./dist/contact砍掉就好

重新跑，點擊contact超連結，之後看原始碼

你會發現它讀取的是Vue進入的那一頁 ./dict/index.html，表示這頁是CSR。

這兩種方法可不可以混在一塊寫…

等你…

會後討論

SSR vs Prerendering dochi? EK

{"metaMigratedAt":"2023-06-14T22:50:36.653Z","metaMigratedFrom":"Content","title":"SSR vs Prerendering dochi?","breaks":true,"contributors":"[{\"id\":\"8e42ec30-16dd-49e7-9493-42a2633bb31a\",\"add\":5935,\"del\":1437}]"}

changed 6 years ago 472 views