Ứng dụng Prerender Vue.js với plugin spa prerender v3

---

Những ngày này, SSR (Kết xuất phía server ) đang được yêu thích. Tăng tốc độ tải trang ban đầu bằng cách gửi một trang HTML đầy đủ thay vì một khung với một vài tập lệnh là một ý tưởng thực sự tuyệt vời. Mặc dù vậy, có một điểm khó khăn. SSR là khó . Có rất nhiều thứ phải lo lắng và nó rất dễ bị hỏng. Sự thật là, trong hầu hết các trường hợp, SSR là quá mức cần thiết. Bạn có thể đạt được hầu hết các lợi ích của SSR trong ứng dụng Vue.js của bạn bằng cách sử dụng prender -spa-plugin để kết xuất trước trang web thành các trang tĩnh tại thời điểm xây dựng.

Kết xuất trước giống như Kết xuất phía server kết hợp với tạo trang web tĩnh, nhưng đơn giản hơn. Bạn cho trình kết xuất trước biết những tuyến nào bạn muốn, sau đó nó kích hoạt trình duyệt hoặc môi trường tương đương, tải các trang và kết xuất HTML kết quả vào các đường dẫn file phù hợp với các tuyến. Điều này cung cấp cho bạn các trang tĩnh được hiển thị đầy đủ, dẫn đến thời gian tải nhanh hơn và không cần phải thực hiện các vụhack kỳ quặcđể triển khai trên các server trang tĩnh . Khi JavaScript tải xong, ứng dụng của bạn sẽ tiếp tục hoạt động như bình thường.

Tuy nhiên, kết xuất trước không phải là một viên đạn bạc, không sử dụng nó nếu bạn có hàng trăm tuyến đường hoặc cần kết xuất trước nội dung động mà không có trình giữ chỗ.

Dù sao, đủ trò chuyện. Hãy xem làm thế nào để làm điều đó.

Lưu ý: prerender-spa-plugin 3.0 vẫn đang ở giai đoạn alpha, vì vậy việc sử dụng API có thể thay đổi trong tương lai. Tôi sẽ cố gắng giữ cho bài viết này được cập nhật. Xem tài liệu chính thức nếu điều gì đó ở đây không hoạt động bình thường.

Hướng dẫn này giả định bạn đã cài đặt một projet nhanh với vue-cli với mẫu webpack-simple , mặc dù nó khá giống nhau đối với bất kỳ cài đặt webpack nào.

Sử dụng

Cài đặt prender-spa-plugin trong dự án Vue.js của bạn.

# Yarn
$ yarn add prerender-spa-plugin@next -D
# or NPM
$ npm install prerender-spa-plugin@next --save-dev

Sau đó, trong webpack.config.js , require() gói có liên quan.

var path = require('path')
var webpack = require('webpack')
// Add these
const PrerenderSPAPlugin = require('prerender-spa-plugin')
// Renders headlessly in a downloaded version of Chromium through puppeteer
const PuppeteerRenderer = PrerenderSPAPlugin.PuppeteerRenderer

...

module.exports = {
  ...
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: __dirname, // The path to the folder where index.html is.
      routes: ['/'], // List of routes to prerender.
      renderer: new PuppeteerRenderer()
    })
  ]
}

...

Bây giờ, sau khi bạn chạy lại webpack, bạn sẽ thấy rằng index.html trong folder root của dự án hiện cũng chứa nội dung được hiển thị của trang.

Chuyển đổi trình kết xuất

PuppeteerRenderer là tuyệt vời ... ngoại trừ khi nó không. Nó không phải là quá nhanh và không thể hiển thị hàng tấn trang mà không chứa nhiều tài nguyên hệ thống.

Nếu bạn cần kết xuất hàng trăm hoặc hàng nghìn trang, JSDOMRenderer có thể là lựa chọn tốt hơn. jsdom giả mạo môi trường trình duyệt bên trong Node.js và giả mạo nhiều nhất có thể. Nó thực hiện một công việc khá tốt, nhưng không thể xử lý mọi thứ. Bạn có thể cần điều chỉnh ứng dụng của bạn để hoạt động xung quanh một số API mới hoặc bất thường có thể không có.

JSDOMRenderer không đi kèm với prender prerender-spa-plugin theo mặc định. Bạn sẽ phải cài đặt nó với.

# Yarn
$ yarn add @prerenderer/renderer-jsdom -D
# NPM
$ npm install @prerenderer/renderer-jsdom --save-dev

Ví dụ về JSDOMRenderer:

var path = require('path')
var webpack = require('webpack')
// Add these
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const JSDOMRenderer = require('@prerenderer/renderer-jsdom')

...

module.exports = {
  ...
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: __dirname, // The path to the folder where index.html is.
      routes: ['/'], // List of routes to prerender.
      renderer: new JSDOMRenderer()
    })
  ]
}

...

Nếu bạn muốn, cũng khá dễ dàng để triển khai trình kết xuất của bạn . Xem tài liệu chính thức để biết thêm thông tin.

Cấu hình

Kết xuất chậm trễ

Không phải lúc nào bạn cũng muốn kết xuất trang ngay lập tức. Đôi khi bạn muốn chờ đợi điều gì đó xảy ra.

Cả ba trình kết xuất có thể đợi ba trình kích hoạt khác nhau:

Chờ một phần tử tồn tại:

renderer: new PuppeteerRenderer({
  // Wait to render until the element specified is detected with document.querySelector.
  renderAfterElementExists: '#app'
})

Chờ một sự kiện tài liệu được kích hoạt:

Bạn có thể kích hoạt một sự kiện trong ứng dụng của bạn với document.dispatchEvent(new Event('my-document-event'))

renderer: new PuppeteerRenderer({
  // Wait to render until a specified event is fired on the document.
  renderAfterDocumentEvent: 'my-document-event'
})

Chờ một khoảng thời gian cụ thể:

renderer: new PuppeteerRenderer({
  // Renders after 5000 milliseconds. (5 seconds.)
  renderAfterTime: 5000
})

Tiêm biến

Trình kết xuất cũng có thể đưa một biến vào phạm vi chung trước khi tập lệnh ứng dụng của bạn chạy. Điều này rất hữu ích nếu bạn cần chuyển thứ gì đó vào ứng dụng của bạn hoặc thay đổi hành vi tùy thuộc vào việc trang có được hiển thị trước hay không.

renderer: new PuppeteerRenderer({
  // injectProperty: '__PRERENDER_INJECTED'
  // You can change the property added to window. The default is window.__PRERENDER_INJECTED.
  // Inject can be any object that is JSON.stringify-able.
  inject: {
    nestLocation: 'bayou'
  }
})

Bây giờ trong ứng dụng của bạn, window.__PRERENDER_INJECTED.nestLocation === 'bayou'

Đó là về nó cho bây giờ! Tận hưởng kết xuất trước!

---

---

Các tin liên quan