Technical SEO

Pre-rendering

Quá trình tạo trước các trang tĩnh từ ứng dụng JavaScript để đảm bảo nội dung sẵn sàng cho crawler ngay khi yêu cầu.

3 lượt xem Cập nhật: 30/05/2026

Pre-rendering là gì?

Pre-rendering là quá trình tạo sẵn các trang HTML tĩnh từ ứng dụng JavaScript (như React, Vue, Angular) trước khi người dùng hoặc công cụ tìm kiếm truy cập. Thay vì để crawler phải chạy JavaScript để render nội dung — điều thường thất bại hoặc chậm — pre-rendering sinh ra phiên bản HTML hoàn chỉnh ngay từ đầu, chứa đầy đủ tiêu đề, mô tả, nội dung văn bản và liên kết.

Khác với server-side rendering (SSR), pre-rendering không sinh HTML mỗi lần yêu cầu mà chỉ thực hiện một lần lúc build — thường trong môi trường CI/CD hoặc khi cập nhật nội dung. Kết quả là tập hợp các file HTML được lưu trữ trên máy chủ hoặc CDN, sẵn sàng phục vụ ngay lập tức.

Tại sao quan trọng trong SEO?

Công cụ tìm kiếm như Googlebot vẫn có thể xử lý JavaScript, nhưng khả năng này có giới hạn: thời gian crawl, tài nguyên CPU, độ trễ mạng và mức độ phức tạp của mã đều ảnh hưởng đến việc thu thập nội dung. Nếu trang phụ thuộc hoàn toàn vào client-side rendering (CSR), nhiều phần nội dung có thể bị bỏ sót — đặc biệt là thẻ meta, heading, văn bản chính hay liên kết nội bộ.

Pre-rendering giải quyết vấn đề này bằng cách đảm bảo crawler nhận được HTML đầy đủ ngay từ lượt yêu cầu đầu tiên. Điều này giúp:

  • Tăng tốc độ thu thập (crawling speed)
  • Cải thiện độ chính xác trong việc hiểu chủ đề và cấu trúc trang
  • Hỗ trợ index nhanh hơn cho trang mới hoặc cập nhật
  • Duy trì tính nhất quán giữa trải nghiệm người dùng và trải nghiệm crawler

Đây là giải pháp phù hợp với các trang ít thay đổi theo thời gian thực (ví dụ: trang giới thiệu, blog, landing page sản phẩm), nơi không cần SSR linh hoạt nhưng đòi hỏi SEO mạnh.

Cách hoạt động

Khi bạn bật pre-rendering, hệ thống sẽ:

  1. Chạy ứng dụng JavaScript trong môi trường headless (thường là Puppeteer hoặc JSDOM)
  2. Truy cập từng route đã định nghĩa (ví dụ: /san-pham/a, /gioi-thieu)
  3. Chờ cho tất cả dữ liệu và thành phần được render xong (có thể cấu hình thời gian chờ)
  4. Lấy nội dung HTML cuối cùng và lưu dưới dạng file tĩnh (ví dụ: dist/san-pham/a/index.html)
  5. Triển khai các file này lên máy chủ web hoặc CDN

Quá trình này xảy ra ở giai đoạn build — không liên quan đến runtime. Vì vậy, không tốn tài nguyên máy chủ khi người dùng truy cập.

Hướng dẫn thực hiện

Dưới đây là các bước triển khai pre-rendering phổ biến cho ứng dụng SPA:

  1. Xác định danh sách route cần pre-render: Chỉ nên chọn những trang có nội dung cố định và quan trọng với SEO (tránh route động như /user/:id nếu không có danh sách rõ ràng).
  2. Chọn công cụ phù hợp: Các thư viện phổ biến gồm prerender-spa-plugin (cho webpack), @prerenderer/prerenderer, hoặc tích hợp sẵn trong framework như Vue CLI’s prerender-spa-plugin hoặc React Snap.
  3. Cấu hình thời gian chờ và sự kiện hoàn tất: Đặt renderAfterTime hoặc renderAfterElementExists để đảm bảo toàn bộ nội dung đã xuất hiện trước khi chụp HTML.
  4. Build và kiểm tra đầu ra: Chạy lệnh build, sau đó mở file HTML cục bộ để kiểm tra: thẻ <title>, <meta name="description">, heading, văn bản có hiển thị đúng không? Không có thẻ div id="app"> trống.
  5. Triển khai và kiểm tra trên môi trường production: Dùng công cụ như Google Search Console để kiểm tra “Xem như Google” hoặc tải trang bằng curl -s URL | head -30 để xem HTML thô.

Lỗi thường gặp

Dưới đây là những vấn đề phổ biến và cách khắc phục:

Lỗi Nguồn gốc Cách khắc phục
HTML trống hoặc chỉ có <div id="app"></div> Ứng dụng chưa render xong trước khi chụp Tăng renderAfterTime hoặc dùng renderAfterElementExists với selector chắc chắn (ví dụ: .main-content)
Thiếu thẻ meta hoặc title sai Plugin không tương thích với thư viện quản lý meta (ví dụ: vue-meta, react-helmet) Dùng phiên bản plugin hỗ trợ — ví dụ: prerender-spa-plugin v3+ hỗ trợ vue-meta; hoặc chuyển sang prerenderer với hook tùy chỉnh
Link nội bộ bị thiếu hoặc sai Router sinh link động bằng JS, không tồn tại trong HTML tĩnh Sử dụng <a href="..."> thay vì <router-link> trong template pre-render, hoặc cấu hình router ở chế độ history + fallback server

Ví dụ thực tế

Một website thương mại điện tử dùng React để hiển thị danh mục sản phẩm. Ban đầu, trang /danh-muc/dien-tu chỉ hiển thị skeleton loader khi crawler truy cập — dẫn đến không index được tên sản phẩm, giá, mô tả. Sau khi triển khai pre-rendering với React Snap, hệ thống tự động tạo file dist/danh-muc/dien-tu/index.html chứa đầy đủ:

  • <title>Danh mục điện tử – Giá tốt tháng 4/2024 | Công ty ABC</title>
  • <meta name="description" content="Mua sắm thiết bị điện tử chính hãng: tivi, loa, tai nghe… giá rẻ, bảo hành dài hạn.">
  • Các thẻ <h1>, <h2>, danh sách sản phẩm với tên, giá, nút “Xem chi tiết” dưới dạng thẻ <a href="/san-pham/tivi-sony-x90j">

Kết quả: số lượng trang được index tăng 68% trong 2 tuần, traffic organic từ danh mục tăng 41% (theo dữ liệu Search Console), thời gian crawl trung bình giảm từ 2.4s xuống còn 0.3s.

Câu hỏi thường gặp

Pre-rendering khác gì so với SSR?

Pre-rendering sinh HTML tĩnh một lần lúc build, không xử lý mỗi request. SSR sinh HTML mới mỗi lần người dùng truy cập — đòi hỏi server mạnh và logic xử lý động. Pre-rendering nhẹ hơn, phù hợp trang ít thay đổi; SSR linh hoạt hơn với dữ liệu thời gian thực.

Có cần dùng pre-rendering nếu đã dùng Next.js hoặc Nuxt?

Tùy trường hợp. Next.js (ở chế độ static generation — getStaticProps) và Nuxt (chế độ generate) bản chất là pre-rendering nâng cao. Nếu bạn đã cấu hình đúng và export thành HTML tĩnh, thì không cần thêm công cụ bên ngoài.

Pre-rendering có hỗ trợ trang cá nhân hóa không?

Không. Pre-rendering chỉ phù hợp với nội dung chung, không phụ thuộc vào cookie, session hay dữ liệu người dùng. Với trang cá nhân hóa (ví dụ: bảng điều khiển người dùng), nên giữ ở chế độ CSR hoặc dùng SSR kết hợp với cache phân đoạn.