Vue.js和SSR服務器端補水

我有一個Vue.js應用程序與服務器端渲染（SSR），然後客戶端水化，它工作得很好。我喜歡建立同構的JavaScript，並認爲它是未來的方式。Vue.js和SSR服務器端補水

但是我仍然想解決一個問題。下面是一個簡單的示意圖：

首先，我們檢查，如果我們有緩存的HTML響應

如果我們沒有緩存那麼我們：

做服務器端渲染（ SSR）從vue.js應用程序呈現HTML
然後我們保存到緩存
併發送回應給客戶端
在這裏，我們掛載了vue.js應用程序並進行客戶端水合。

這個流程我已經下來，工作很好。我想弄清楚是如何做到藍色的一步。

如果我們有緩存我想：

加載HTML和就像客戶端水化安裝vue.js應用和更新緩存的HTML的作品則是唯一的只有當前用戶（即帳戶信息，喜歡，跟隨等）
發送迴應客戶端
然後就像以前一樣做客戶端水化，使頁面交互。

我已經做了一些研究，但是找不到任何有關服務器端水合的信息。我甚至研究過像反應和角2這樣的其他異形框架，看看它們是否有解決方案並找不到。

我不介意建造這樣的東西，但我需要一個正確的方向推動，所以如果有人在那裏工作在這種事情或有任何建議，非常感謝。

來源

2016-12-05 smitt04

嗨。我可以問你關於服務器性能嗎？無需緩存即可達到每秒多少個請求？ – Mattia

不幸的是，我還沒有時間做基準測試，我們將很快上線，當我得到一些數字我可以報告。 – smitt04

作爲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>

正如你所看到的，這就是你想要的。

來源

2017-03-09 03:44:38

是的，我有正常的客戶端水合工作的SSR。但是，從緩存中獲取html，並用用戶信息提供給客戶端會很酷。這樣我們看不到閃爍，因爲所有用戶的大部分頁面都是相同的，所以緩存它很不錯，然後在服務器到達客戶端之前更新服務器上不同的部分。 – smitt04

Vue.js和SSR服務器端補水

回答

相關問題