Vue: SSRする際にクライアントのエントリが必要な理由がわからない

Question

VueでSSRをしたいと考えています。ReactやVueで普通のアプリケーションを構築(webpackでのbundleも含め)した経験はありますが、SSRは初めてで、基本的なところがいまいち掴めていません。

Nuxtを使ってみたところ、細かいところが見えないと感じたので、公式ドキュメントをもとに生のVueでSSRを試みています。

特に問題なくサンプルは完成したのですが、いまいち理解できない点があります。

クライアント側のエントリの役割がわからない

公式の図よりSSRの仕組みを掴もうとしているのですが、その図にある"client bundle"が果たす役割がよくわかりません。

そもそもSSRはサーバーサイドでレンダリングを済ませるものであるため、クライアント側は特に何かする必要はないものと考えていました。「URLにアクセスされたら、それをExpressが検知して、htmlを返す」という認識です。

しかし実際には、"entry-client.js"などを用意して、クライアント側でも何かを描画しようとしている？ようです。

"client bundle"はhydrateしている？と記載があったので、そこら辺の説明も読んでみたのですが、いまいち何をしているのか掴めません。

質問

• このhydrateとは何をするものなのか？
• クライアント側でも描画する意味

しばらくこのサンプルとかをいじってみたのですが、上記に関してはわかりませんでした。

ご教授いただくか、参考になる記事などをご紹介いただきたいです。
よろしくお願いします。

Answer 1

そもそもSSRはサーバーサイドでレンダリングを済ませるものであるため、クライアント側は特に何かする必要はないものと考えていました。「URLにアクセスされたら、それをExpressが検知して、htmlを返す」という認識です。

こちらの認識がすこし違います。
SSRをする場合でも、ブラウザ側での処理が必要です。

違いを明確にするため、まず、SSRでない通常のVueアプリケーションの場合のを説明します。
テンプレート、ロジックなどを含めてすべてが、例えばbunle.jsに含まれていて、
HTMLには<div id="app"></div>だけが、マウントポジションとして記述してあります。
ブラウザでbunle.jsが処理され、<div id="app"></div>に、動的に生成されたHTMLがマウントされます（Virtual DOM からReal DOM）。

次に、SSRの場合です。
SSRを利用する場合、Vueコンポーネントをサーバ上のHTML文字列に描画してからブラウザに送信します。
例えば、以下のようなHTMLを生成して送信したとします。

<div id="app">
    <div id="about">
        <!-- AboutページのHTML -->
    </div>
</div>

このままでは静的なHTMLでしかないので、通常のVueアプリケーションの場合と同様に、初期化処理が必要です。この処理が記述されているのがentry-client.jsです。
ここで<div id="app"></div>にマウントする場合、改めてゼロからHTMLを作り出す（Virtual DOM からReal DOM）のではなく、すでに存在するHTMLを利用します（Real DOMからVirtual DOM）。
この処理がハイドレートです。

結局のところ、クライアント側でも処理が必要ですので、その処理が書かれたファイルも必要です。
大雑把に言えば、SSRとは「（最初に）アクセスしたページだけレンダリングしてHTMLを送る」ものですので、クライアントサイドで「特に何かする必要はない」わけではないです。

以上、自分が学んだ限りの認識ですので、間違っていたらすみません。