Kết xuất động bằng Rendertron

Thứ Năm, ngày 31 tháng 1 năm 2019

Nhiều khung giao diện sử dụng JavaScript để cho hiện nội dung. Phương pháp này có thể khiến Google mất một chút thời gian để lập chỉ mục nội dung hoặc cập nhật nội dung đã lập chỉ mục.

Một giải pháp mà chúng tôi đã thảo luận tại Google I/O năm nay là phương thức kết xuất động. Có nhiều cách để triển khai phương thức này. Bài đăng blog này trình bày ví dụ về cách triển khai kết xuất động bằng Rendertron, một giải pháp nguồn mở dựa trên Chromium không có giao diện người dùng.

Những trang web nào nên cân nhắc sử dụng phương thức kết xuất động?

Không phải mọi công cụ tìm kiếm hay bot trên các kênh mạng xã hội đều có thể chạy JavaScript khi truy cập trang web của bạn. Có thể Googlebot sẽ cần thời gian để chạy JavaScript và có một số hạn chế.

Phương thức kết xuất động rất hữu ích cho nội dung thay đổi thường xuyên và cần JavaScript để hiển thị. Phương thức kết xuất kết hợp (chẳng hạn như Angular Universal) có thể cải thiện trải nghiệm người dùng trên trang web của bạn (đặc biệt là thời gian hiển thị nội dung đầu tiên).

Phương thức kết xuất động hoạt động như thế nào?

Cách hoạt động của phương thức kết xuất động

Kết xuất động nghĩa là chuyển đổi giữa nội dung kết xuất phía máy khách và nội dung kết xuất trước đối với các tác nhân người dùng cụ thể.

Bạn sẽ cần có một trình kết xuất để thực thi JavaScript và tạo HTML tĩnh. Rendertron là một dự án nguồn mở sử dụng Chrome không có giao diện người dùng để kết xuất. Các Ứng dụng một trang thường tải dữ liệu ở chế độ nền hoặc trì hoãn các thao tác để kết xuất nội dung. Rendertron có các cơ chế để xác định khi nào một trang web kết xuất xong. Rendertron chờ cho đến khi tất cả yêu cầu mạng hoàn tất và không còn thao tác nào cần thực hiện.

Bài đăng này bao gồm những nội dung sau:

  1. Xem xét một ứng dụng web mẫu
  2. Thiết lập một máy chủ express.js nhỏ để phân phát ứng dụng web
  3. Cài đặt và định cấu hình Rendertron làm phần mềm trung gian để kết xuất động

Ứng dụng web mẫu

Ứng dụng web "góc nhỏ về mèo" sử dụng JavaScript để tải nhiều hình ảnh mèo từ một API và cho hiện những hình ảnh đó ở dạng lưới.

Hình ảnh về các chú mèo dễ thương và nút để hiện thêm – ứng dụng này thực sự có đầy đủ chức năng!

Sau đây là đoạn JavaScript:

const apiUrl = 'https://api.thecatapi.com/v1/images/search?limit=50';
   const tpl = document.querySelector('template').content;
   const container = document.querySelector('ul');
   function init () {
     fetch(apiUrl)
     .then(response => response.json())
     .then(cats => {
       container.innerHTML = '';
       cats
         .map(cat => { const li = document.importNode(tpl, true); li.querySelector('img').src = cat.url; return li;
         }).forEach(li => container.appendChild(li));
     })
   }
   init();
   document.querySelector('button').addEventListener('click', init);

Ứng dụng web dùng JavaScript hiện đại (ES6) chưa được hỗ trợ trong Googlebot. Chúng tôi có thể dùng quy trình kiểm tra tính thân thiện với thiết bị di động để kiểm tra xem Googlebot có thể xem nội dung hay không:

Kết quả kiểm tra cho thấy trang này thân thiện với thiết bị di động, nhưng ảnh chụp màn hình lại không có ảnh mèo nào! Tiêu đề và nút có xuất hiện nhưng không có ảnh mèo.

Mặc dù vấn đề này rất dễ khắc phục, nhưng đây là cơ hội để tìm hiểu cách thiết lập phương thức kết xuất động. Phương thức kết xuất động sẽ cho phép Googlebot xem ảnh mèo mà không cần thay đổi mã ứng dụng web.

Thiết lập máy chủ

Để phân phát ứng dụng web, hãy dùng express (thư viện node.js) để tạo máy chủ web.

Mã máy chủ có dạng như sau (tìm mã nguồn dự án đầy đủ tại đây): 

const express = require('express');
const app = express();
const DIST_FOLDER = process.cwd() + '/docs';
const PORT = process.env.PORT || 8080;
// Serve static assets (images, css, etc.)
app.get('*.*', express.static(DIST_FOLDER));
// Point all other URLs to index.html for our single page app
app.get('*', (req, res) => {
  res.sendFile(DIST_FOLDER + '/index.html');
});
// Start Express Server
app.listen(PORT, () => {
  console.log(`Node Express server listening on https://localhost:${PORT} from ${DIST_FOLDER}`);
});

Bạn có thể thử xem ví dụ trực tiếp – nếu đang sử dụng trình duyệt hiện đại, bạn sẽ thấy nhiều hình ảnh về mèo. Để chạy dự án trên máy tính, bạn cần node.js để chạy các lệnh sau: 

npm install --save express rendertron-middleware
node server.js

Sau đó, trỏ trình duyệt đến https://localhost:8080. Giờ đã đến lúc thiết lập phương thức kết xuất động.

Triển khai một bản sao Rendertron

Rendertron chạy một máy chủ sẽ lấy một URL và trả về HTML tĩnh cho URL bằng cách sử dụng Chromium không có giao diện người dùng. Chúng tôi sẽ áp dụng đề xuất của dự án Rendertron và sử dụng Google Cloud Platform.

Mẫu để tạo một dự án Google Cloud Platform mới.

Vui lòng lưu ý rằng bạn có thể bắt đầu từ gói sử dụng miễn phí, vì theo chính sách định giá của Google Cloud Platform, bạn có thể sẽ phải trả phí khi sử dụng phương thức thiết lập này.

  1. Tạo một dự án mới trong Google Cloud Console. Ghi lại "Project ID" (Mã dự án) bên dưới trường nhập dữ liệu.
  2. Cài đặt SDK Google Cloud như mô tả trong tài liệu và đăng nhập.
  3. Sao chép kho lưu trữ Rendertron trên GitHub bằng: 
    git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
  4. Chạy các lệnh sau để cài đặt phần phụ thuộc và xây dựng Rendertron trên máy tính của bạn: 
    npm install && npm run build
  5. Kích hoạt bộ nhớ đệm của Rendertron bằng cách tạo một tệp mới có tên là config.json trong thư mục Rendertrontron với nội dung sau: 
    { "datastoreCache": true }
  6. Chạy lệnh sau từ thư mục renderertron. Thay YOUR_PROJECT_ID bằng mã dự án ở bước 1. 
    gcloud app deploy app.yaml --project YOUR_PROJECT_ID
  7. Chọn một khu vực và xác nhận triển khai. Chờ đến khi kết thúc.
  8. Nhập URL YOUR_PROJECT_ID.appspot.com. Bạn sẽ thấy giao diện của Rendertron gồm trường nhập dữ liệu và một vài nút.
Giao diện người dùng của Rendertron sau khi triển khai trên Google Cloud Platform

Khi thấy giao diện web Rendertron thì tức là bạn đã triển khai thành công bản sao Rendertron của mình. Hãy ghi lại URL của dự án (YOUR_PROJECT_ID.appspot.com) vì bạn sẽ cần URL đó trong phần tiếp theo của quy trình này.

Thêm Rendertron vào máy chủ

Máy chủ web đang sử dụng express.js và Rendertron có phần mềm trung gian express.js. Chạy lệnh sau trong thư mục của tệp server.js: 

npm install --save rendertron-middleware

Lệnh này sẽ cài đặt phần mềm trung gian của Rendertron từ npm để chúng ta có thể thêm phần mềm đó vào máy chủ: 

const express = require('express');
const app = express();
const rendertron = require('rendertron-middleware');

Thiết lập danh sách bot

Rendertron sử dụng tiêu đề HTTP user-agent để xác định xem yêu cầu đến từ bot hay trình duyệt của người dùng. Giải pháp này có danh sách cập nhật về tác nhân người dùng bot để đối chiếu. Theo mặc định, danh sách này không bao gồm Googlebot vì Googlebot có thể thực thi JavaScript. Để Rendertron cũng kết xuất các yêu cầu Googlebot, hãy thêm Googlebot vào danh sách tác nhân người dùng: 

const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

Rendertron sẽ đối chiếu tiêu đề user-agent với biểu thức chính quy này vào lúc khác.

Thêm phần mềm trung gian

Để gửi yêu cầu bot đến bản sao Rendertron, chúng ta cần thêm phần mềm trung gian vào máy chủ express.js. Phần mềm trung gian kiểm tra tác nhân người dùng đưa ra yêu cầu và chuyển tiếp yêu cầu từ các bot đã biết đến bản sao Rendertron. Thêm mã sau vào server.js và đừng quên thay thế YOUR_PROJECT_ID bằng mã dự án Google Cloud Platform của bạn: 

app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://YOUR_PROJECT_ID.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
}));

Các bot yêu cầu trang web mẫu sẽ nhận được HTML tĩnh từ Rendertron, vì vậy các bot này không cần chạy JavaScript để kết xuất nội dung.

Kiểm tra phương thức thiết lập

Để kiểm tra xem quy trình thiết lập Rendertron có thành công hay không, hãy chạy lại quy trình kiểm tra tính thân thiện với thiết bị di động.

Quy trình kiểm tra tính thân thiện với thiết bị di động cho thấy rằng trang này thân thiện với thiết bị di động và ảnh chụp màn hình giờ đã có tất cả hình ảnh mèo lúc trước bị thiếu!

Không giống lần kiểm tra đầu tiên, hình ảnh mèo giờ đã xuất hiện. Trong thẻ HTML, chúng ta có thể thấy toàn bộ HTML mà mã JavaScript tạo và Rendertron giúp chúng ta không cần sử dụng JavaScript để kết xuất nội dung.

Kết luận

Bạn đã thiết lập phương thức kết xuất động mà không thay đổi gì trong ứng dụng web. Với những thay đổi này, bạn có thể phân phát phiên bản HTML tĩnh của ứng dụng web cho trình thu thập dữ liệu.

Người đăng: Martin Splitt, Kỳ lân trên web mở