iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0

偶而還是會碰到某些區塊不想預先渲染,把某一區塊渲染的負荷分到 Browser,跟SPA一樣做CSR

今天主題寫另一個內建元件 - <no-ssr>

先講個 Facebook 在手機端常見的情況,你的 Timeline 長這樣

SPA 頁面總會有段起始延遲,改用 SSR 後卻發現頁面渲染也需要一段時間為了讓使用者感覺頁面秒開,得在 SSR 和 CSR 取折衷,一般得兩者混用,在使用者可接受的秒差內渲染頁面,頁面部分區塊同 SPA,改採 CSR。

那怎套用情境呢?
讓部分區塊不做 SSR


使用方式

CSR 延遲渲染的區塊,暫時先放個「讀取中效果」,讓使用者感覺 App 還在運作,只是資料還在跑


<no-ssr>
  <xx placeholder="loading...">
</no-ssr>

<no-ssr> placeholder 用來放置初始的 innerHTML,只接受 字串內容

若是你想套用某個讀取元件,有另一種寫法

<no-ssr>
  <xx />
  <xx-placeholder slot="placeholder">
</no-ssr>

套用到情境

<template>
<div>
  <sidebar />
  <no-ssr>
    <!-- this component will only be rendered on client-side -->
    <comments />

    <!-- loading indicator -->
    <comments-placeholder slot="placeholder" />
  </no-ssr>
</div>
</template>

Nuxt 實作

查了 Nuxt 源碼,實作比 <nuxt-link> 更簡單
連名字都不改了

/*
** From https://github.com/egoist/vue-no-ssr
** With the authorization of @egoist
*/
import NoSSR from 'vue-no-ssr'
export default NoSSR

實作直接靠 vue-no-ssr 套件
讀者可參考 Github README.


上一篇
20. Nuxt `<nuxt-link>` 有什麼特別
下一篇
22. Nuxt Routing 進階 - 巢狀路由/嵌套路由 (Nested Routes)
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言