Vue.jsとSSRを使用したサーバサイドハイドレーション

Question

私はVue.jsアプリケーションをサーバサイドレンダリング（SSR）とクライアント側のハイドレーションを処理しています。私はisomorphic javascriptを作って、それが未来の方法だと思っています。

しかし、まだ解決したい問題が1つあります。

まず、我々は、我々のキャッシュを持っていない場合、我々はキャッシュされたHTMLレスポンス

を持っているかどうかを確認：

1. サーバー側（レンダリングでくださいここで簡単な図でありますSSR）を使用してvue.jsアプリからHTMLをレンダリングします
2. 次にキャッシュ
3. に保存し、クライアント
に応答を送信します
4. この時点で、vue.jsアプリをマウントしてクライアントサイドの水分補給を行います。

このフローはうまく機能しています。私は青でステップを実行する方法を理解したいと思います。

我々はキャッシュを持っている場合は、私はしたいと思います：（htmlとちょうどクライアント側の水和のようにvue.jsアプリをマウントし、キャッシュされたHTMLの断片を更新

1. ロードは、その後、現在のユーザーのみに固有のものですアカウント情報、好きな、追いつくなど）
2. クライアントに返信を送信
3. これまでのように、ページをインタラクティブにするためにクライアントサイドの水和を行うのと同じです。

私はいくつかの調査を行いましたが、サーバーサイドハイドレーションに関する情報は見つかりませんでした。私は反応と角度2のような他の同形のフレームワークを見て、彼らが解決策を持っていて、見つけられなかったかどうかを調べました。

私はこのようなものを構築しても構いませんが、正しい方向にプッシュする必要があります。そのようなことに取り組んでいる人がいる場合、または何か提案があれば、感謝します。

Answer 1

documentは、クライアント側ハイドレーションで、言ったように：サーバーレンダリング出力で

、ルート要素は サーバーレンダリング=「true」属性を持つことになります。クライアントで、この属性を持つ要素にVue インスタンスをマウントすると、新しいDOMノードを作成する代わりに 既存のDOMを「水和」しようとします。

<div class="app" id="app" server-rendered="true"> 
    <div class="labrador">Hello Labrador</labrador> 
    <div class="husky"></div> 
</div> 

とクライアントコードは次のとおりです：

たとえば、サーバーレンダリング結果は

Vue.component('husky', { 
    template: '<div class="husky">Hello husky</div>' 
}) 

var rootComp = { 
    template: '' + 
     '<div class="app" id="app">' + 
     ' <div class="labrador"></div>' + 
     ' <husky></husky>' + 
     '</div>' 
} 

new Vue({ 
    el: '#app', 
    render: h => h(rootComp) 
}) 

だから、クライアントが生成された仮想DOMツリーは、DOMと一致を見つけるだろうサーバからの構造。「水分補給」した後、最終レンダリング結果は次のようになります。ご覧のとおり

<div class="app" id="app" server-rendered="true"> 
    <div class="labrador">Hello Labrador</labrador> 
    <div class="husky">Hello husky</div> 
</div> 

、これはあなたが望むものです。