Nuxt.jsを使ってサーバーサイドレンダリングを行なっているが、なにを行なっているかをざっくりまとめてみる。
Vue.js はクライアントサイドアプリケーションを構築するためのフレームワークである。
通常では（SSRではないSPAの場合）、Vue コンポーネントはブラウザで DOM をレンダリングする。
しかし、同じ Vue コンポーネントをサーバ上の HTML 文字列に描画し、ブラウザに直接送信し、最終的に静的なマークアップとしてクライアント上の完全なインタラクティブアプリケーションに "ハイドレート (hydrate)" することが出来る。
サーバで描画された Vue.js のアプリケーションは、アプリケーションのコードの大部分が、サーバとクライアントの両方で実行されるという意味で、"アイソモルフィック (isomorphic)" や "ユニバーサル (universal)" と見なすことができる。
SSRでない場合は、バンドルされたJSがブラウザに渡り、ブラウザからAPIを叩いてデータを取得したり、ブラウザでHTMLをレンダリングしたりする。
SSRではサーバーサイドでも同じようにJSを動作させて、APIを叩いてデータを取得したり、HTMLをレンダリングして、それをブラウザに送信する。
SSRにおけるクライアント側はクライアント側でも同じ処理をしながら、サーバーから送られてきたHTMLと自身が生成したHTMLを比べ、"ハイドレート (hydrate)" する。
その際、サーバーサイドでレンダリングされたものには、
<div data-server-rendered="true" id="__nuxt">
というようにdata-server-renderd="true"という目印をつけて送られる。
この data-server-rendered という特別な属性は、クライアントサイドの Vue に、これがサーバ上で描画されたことを知らせ、この要素はハイドレーションモードでマウントされる。
開発モードでは、Vue はクラインアントサイドで生成された仮想DOM が、サーバで描画された DOM の構成と一致しているか検証を行う。
もしこれが一致していない場合、ハイドレーションを取りやめ、元の DOM を無視しスクラッチから描画を行う。
プロダクションモードでは、パフォーマンスの最大化のため、このアサーションは無効になる。
つまり、プロダクションモードでは、ハイドレーションをとりやめず、仮装DOMとの不一致部分の変更になるという事か、この辺りはもう少し調べる必要がある。