サーバーサイドレンダリング (SSR) [Vue.js]

サーバーサイドレンダリング (SSR)

参考：

Vue.js サーバサイドレンダリングガイド [公式]

ドキュメント

参考：

基本的な使い方 | Vue SSR ガイド [公式]

使い方

参考：

Vue.js で SSR (サーバサイドレンダリング) する – Qiita

すごくカンタンな SSR with Vue.js – Qiita

基本的な使い方 | Vue SSR ガイド [公式]

概要

参考：

Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話 – SlideShare

Renderer

参考：

Renderer | Vue SSR ガイド [公式]

createRenderer | Vue SSR ガイド [公式]

BundleRenderer

参考：

BundleRenderer | Vue SSR ガイド [公式]

createBundleRenderer | Vue SSR ガイド [公式]

template

参考：

template | Vue SSR ガイド [公式]

データストア

参考：

データのプリフェッチと状態 | Vue SSR ガイド [公式]

Data pre-fetching about sub components · Issue #29 · vuejs/vue-ssr-docs – GitHub

getMatchedComponents

参考：

router.getMatchedComponents | Vue Router [公式]

Component in Vue.js server-side rendering – Stack Overflow

キャッシュ

参考：

キャッシュ | Vue SSR ガイド [公式]

タイトル

参考：

ヘッドの管理 | Vue SSR ガイド [公式]

Nuxt.js

参考：

Vue.js + SSR を利用した Web サイトコーディングの可能性 | オンスタ

render function or template not defined in component エラー

SSR で描画しようとした際に render 関数もしくはテンプレートが見つからない旨のエラーが発生する。

Error: render function or template not defined in component

対処法：

該当するコンポーネントを SSR で描画しないようにする。<no-ssr></no-ssr> タグで囲う。(no-ssr コンポーネントを使う。)

参考：

dfeinberg5 commented on 25 Dec 2017 – SSR compatibility · Issue #114 · NightCatSama/vue-slider-component – GitHub

render function or template not defined in component: anonymous · Issue #1041 · nuxt/nuxt.js – GitHub

Errors become “render function or template not defined in component: anonymous” after refresh · Issue #2792 · nuxt/nuxt.js – GitHub

render function or template not defined in component: anonymous – Stack Overflow

Tips

参考：

スタートアップで SSR に Vue.js を導入して Web サービスを開発して得た設計 – Qiita

no-ssr

参考：

Hide SSR-Incapable Vue Components with vue-no-ssr | Alligator.io

<no-ssr> コンポーネント | Nuxt.js [公式]

egoist/vue-no-ssr: Vue component to wrap non SSR friendly components – GitHub

vue-ssr-example

参考：

TatsuUkraine/vue-ssr-example: Ready for use Example for Vue + Vuex + TS + SSR + Jest – GitHub

vue-mq

参考：

AlexandreBonaventure/vue-mq: Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue. – GitHub

SSR Support · Issue #2 · AlexandreBonaventure/vue-mq – GitHub

nuxt-mq

参考：

vanhoofmaarten/nuxt-mq: vue-mq module for Nuxt.js – GitHub

nuxt.js (v2) で便利な vue-mq を使ってみるが SSR モードでコンソールエラーがでるので確認してみた。 – Qiita