Hydration phía máy chủ với Vue.js và SSR

Question

Tôi có một ứng dụng Vue.js làm việc với Server Side Rendering (SSR) và sau đó là hydrat hóa phía máy khách và nó hoạt động tốt. Tôi thích xây dựng javascript đẳng cấu và nghĩ rằng đó là con đường của tương lai.

Nhưng vẫn còn một vấn đề tôi muốn giải quyết. Dưới đây là một sơ đồ đơn giản:

tiên chúng ta kiểm tra xem chúng có phản ứng HTML cache

Nếu chúng ta không có bộ nhớ cache sau đó chúng tôi:

1. Đừng một Server Side Render (SSR) để hiển thị HTML từ ứng dụng vue.js
2. Sau đó, chúng tôi lưu vào bộ nhớ cache
3. và gửi phản hồi cho khách hàng
4. Tại thời điểm này, chúng tôi gắn kết ứng dụng vue.js và thực hiện quá trình hydrat hóa phía máy khách.

Luồng này tôi bị hỏng và hoạt động tốt. Tôi muốn tìm ra là làm thế nào để làm các bước màu xanh lam.

Nếu chúng ta có bộ nhớ cache Tôi muốn:

1. tải html và cũng giống như bên hydrat hóa khách hàng gắn kết ứng dụng vue.js và cập nhật các mẩu html cache sau đó là duy nhất cho người dùng hiện tại chỉ (tức là thông tin tài khoản, lượt thích, theo dõi, v.v.)
2. gửi phản hồi cho khách hàng
3. sau đó cũng giống như trước khi hydrat hóa phía khách hàng làm cho trang tương tác.

Tôi đã thực hiện một số nghiên cứu và tôi không thể tìm thấy bất kỳ thông tin nào về Hydrat hóa phía máy chủ. Tôi thậm chí còn nhìn vào framworks isopmorphic khác như phản ứng và góc 2 để xem họ có một giải pháp và không thể tìm thấy một.

Tôi không ngại xây dựng thứ gì đó như thế này nhưng tôi cần một hướng đi đúng hướng, vì vậy nếu có ai đó đang làm việc trên loại điều này hoặc có bất kỳ đề xuất nào, được đánh giá cao.

Answer 1

Khi document nói, Client Side Hydration là:

Trong đầu ra máy chủ trả lại, phần tử gốc sẽ có server-rendered = thuộc tính "true" . Trên máy khách, khi bạn gắn một cá thể Vue vào một phần tử với thuộc tính này, nó sẽ cố gắng "hydrat" DOM ​​hiện có thay vì tạo các nút DOM mới.

Ví dụ, kết quả máy chủ trả lại là:

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

và mã khách hàng là:

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) 
}) 

Vì vậy, khách hàng sẽ tìm cây DOM ảo được tạo ra phù hợp với DOM cấu trúc từ máy chủ.Sau "Hydrat hóa", kết quả hiển thị cuối cùng sẽ là:

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

Như bạn thấy, đây là những gì bạn muốn.