偶而還是會碰到某些區塊不想預先渲染，把某一區塊渲染的負荷分到 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.