VueJS: Bắt đầu với SSR
Giải phóng thời gian, khai phóng năng lực
#Cài đặt
npm install vue vue-server-renderer --save
Chúng ta sẽ sử dụng NPM trong suốt hướng dẫn này, nhưng bạn có thể sử dụng Yarn.
Ghi chú
- Bạn nên sử dụng Node.js phiên bản 6+.
vue-server-renderervàvuephải có các phiên bản phù hợp.vue-server-rendererdựa vào một số mô-đun gốc Node.js và do đó chỉ có thể được sử dụng trong Node.js. Chúng tôi có thể cung cấp một bản dựng đơn giản hơn có thể chạy trong các thời gian chạy JavaScript khác trong tương lai.
Hiển thị một đối tượngVue
// Bước 1: Tạo đối tượng Vue
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// Bước 2: Tạo một renderer
const renderer = require('vue-server-renderer').createRenderer()
// Bước 3: Hiển thị đối tượng Vue tới HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
// trong 2.5.0+, trả về một Promise nếu không có callback nào được truyền:
renderer.renderToString(app).then(html => {
console.log(html)
}).catch(err => {
console.error(err)
})
Tích hợp với Máy chủ
Nó khá đơn giản khi được sử dụng bên trong một máy chủ Node.js, ví dụ : Express:
npm install express --save
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>The visited URL is: {{ url }}</div>`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)
Sử dụng mẫu trang
Khi bạn hiển thị ứng dụng Vue, trình kết xuất chỉ tạo đánh dấu ứng dụng. Trong ví dụ này, chúng ta phải bọc kết quả đầu ra bằng một trình bao trang HTML phụ.
Để đơn giản hóa điều này, bạn có thể trực tiếp cung cấp mẫu trang khi tạo trình kết xuất đồ họa. Hầu hết thời gian chúng ta sẽ đặt mẫu trang trong tệp riêng của nó, ví dụ index.template.html:
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
Lưu ý với comment <!--vue-ssr-outlet--> - đây là nơi đánh dấu ứng dụng của bạn sẽ được đưa vào.
Sau đó chúng ta có thể đọc và chuyển tệp tới trình kết xuất đồ thị Vue:
const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
renderer.renderToString(app, (err, html) => {
console.log(html) // sẽ là một trang đầy đủ với nôi dung app được đưa vào.
})
Nội suy mẫu
Mẫu cũng hỗ trợ nội suy đơn giản. Cho mẫu sau:
<html>
<head>
<!-- use double mustache for HTML-escaped interpolation -->
<title>{{ title }}</title>
<!-- use triple mustache for non-HTML-escaped interpolation -->
{{{ meta }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
Chúng ta có thể cung cấp dữ liệu nội suy bằng cách chuyển "đối tượng ngữ cảnh hiển thị" làm đối số thứ hai cho renderToString:
const context = {
title: 'hello',
meta: `
<meta ...>
<meta ...>
`
}
renderer.renderToString(app, context, (err, html) => {
// tiêu đề trang sẽ là "Hello"
// thẻ meta được đưa vào
})
Đối tượng context cũng có thể được chia sẻ với cá thể ứng dụng Vue, cho phép các thành phần tự động đăng ký dữ liệu cho nội suy mẫu.
Ngoài ra, mẫu hỗ trợ một số tính năng nâng cao như:
- Tự động đưa CSS quan trọng khi sử dụng các thành phần *.vue;
- Tự động thêm các liên kết asset và gợi ý tài nguyên khi sử dụng
clientManifest; - Tự động thêm và phòng ngừa XSS khi nhúng trạng thái Vuex cho hydrat hóa phía máy khách.
Chúng tôi sẽ thảo luận những điều này khi chúng ta tìm hiểu các khái niệm liên quan trong loạt bài hướng dẫn sau.
Giải phóng thời gian, khai phóng năng lực