VueJS: Streaming

vue-server-renderer hỗ trợ hiển thị luồng ngoài khối, cho cả trình kết xuất cơ sở và trình kết xuất gói. Tất cả những gì bạn cần làm là sử dụng renderToStream thay vì renderToString:

const stream = renderer.renderToStream(context)

Giá trị trả về là luồng Node.js:

let html = ''

stream.on('data', data => {
  html += data.toString()
})

stream.on('end', () => {
  console.log(html) // render complete
})

stream.on('error', err => {
  // handle error...
})

Streaming Caveat

Trong chế độ hiển thị luồng, dữ liệu được phát ra càng sớm càng tốt khi trình kết xuất truyền tải cây DOM ảo. Điều này có nghĩa là chúng ta có thể nhận được "đoạn đầu tiên" trước đó và bắt đầu gửi nó tới client nhanh hơn.

Tuy nhiên, khi đoạn dữ liệu đầu tiên được phát ra, các component con có thể thậm chí không được khởi tạo, các vòng đời của chúng sẽ không được gọi. Điều này có nghĩa là nếu các component con cần đính kèm dữ liệu vào ngữ cảnh hiển thị trong các vòng đời của chúng, các dữ liệu này sẽ không có sẵn khi luồng bắt đầu. Vì rất nhiều thông tin ngữ cảnh (như thông tin đầu hoặc CSS quan trọng) cần phải xuất hiện trước khi đánh dấu ứng dụng, về cơ bản chúng ta phải đợi cho đến khi luồng hoàn tất trước khi chúng ta có thể bắt đầu sử dụng các dữ liệu ngữ cảnh này.

Do đó KHÔNG khuyến khích sử dụng chế độ streaming nếu bạn dựa vào dữ liệu ngữ cảnh được điền bởi các hook vòng đời component.