サーバーサイドレンダリング（SSR）はウェブページのレンダリングをブラウザの代わりにサーバー上で行う、画面の表示において有用なアプリケーションの機能です。サーバーサイドは完全にレンダリングされたページをクライアントに送信します。クライアントの JavaScript バンドルが引継ぎ Vue.js のアプリがハイドレーションできるようにします。

Node.js サーバー環境が必須

ウェブページをレンダリングするためには JavaScript の環境が必要です。

Vue.js のアプリケーションを実行するには Node.js サーバーの環境構築が必要です。

サーバーの拡張と制御

serverMiddleware でサーバーを拡張しルートを middleware で制御することができます。

export default function (req, res, next) {
  console.log(req.url)
  next()
}

export default {
  serverMiddleware: ['~/api/logger']
}

サーバーの middleware がパスにマップされた関数のリストで構成されている場合:

サーバー環境とブラウザ環境

Node.js の環境を利用するため req や res といった Node.js のオブジェクトにアクセス可能です。また window や document といったブラウザ環境に帰属するオブジェクトにはアクセスできません。ただし beforeMount や mounted などのフックを使うと window や document を使うことができます。

beforeMount () {
  window.alert('hello');
}
mounted () {
  window.alert('hello');
}

Nuxt.js でのサーバーサイドレンダリングのステップ

ステップ 1: ブラウザからサーバーへ

ブラウザが最初のリクエストを送ると Node.js の内部サーバーへ到達します。Nuxt.js は HTML を生成し asyncData、 nuxtServerInit、 fetch といった関数を実行した結果と共にブラウザへ送り返します。フック関数も同様に実行されます。

ステップ 2: サーバーからブラウザへ

サーバーによって生成された HTML と共にレンダリングされたページをブラウザが受け取ります。その内容が表示され Vue.js のハイドレーションが作用し始めます。この工程の後、ページがインタラクティブになります。

ステップ 3: ブラウザからブラウザへ

<NuxtLink> によるページ間の遷移はクライアントサイドで行われるためブラウザをハード再読み込みをしない限りサーバーへリクエストを送りません。