Tối ưu SEO cho Website Client-Side Rendering: Dynamic Rendering vs Static Export

Nỗi đau SEO của các website thuần React / Vue (SPA)#

Khi bạn xây dựng website bằng React (Create React App hoặc Vite thuần client), mã HTML ban đầu gửi về cho Googlebot chỉ vỏn vẹn một thẻ rỗng:

<div id="root"></div>
<script src="/bundle.js"></script>

Mặc dù Googlebot tuyên bố có thể chạy JavaScript để cào dữ liệu, thực tế:

• Quá trình chạy JS của Googlebot bị xếp vào hàng đợi chậm (Render Queue), có thể mất từ vài ngày đến vài tuần mới hoàn tất.
• Các bot mạng xã hội (Facebook, Zalo, LinkedIn, Twitter) hoàn toàn KHÔNG CHẠY JAVASCRIPT, dẫn tới việc chia sẻ link không hiện được ảnh thumbnail, tiêu đề và mô tả!

So sánh 2 giải pháp cứu cánh cho website SPA cũ#

1. Dynamic Rendering (Prerender Service)#

• Dùng một dịch vụ như Prerender.io hoặc tự dựng cụm Puppeteer / Rendertron.
• Khi có request gửi đến: Kiểm tra User-Agent. Nếu là người dùng thật $\rightarrow$ Trả về SPA bình thường. Nếu là Bot tìm kiếm (Googlebot, Bingbot, FacebookExternalHit) $\rightarrow$ Định tuyến qua Puppeteer để chụp lại bản HTML tĩnh hoàn chỉnh và trả về cho bot.
• Ưu điểm: Không cần phải viết lại toàn bộ mã nguồn của dự án cũ.
• Nhược điểm: Tốn chi phí vận hành máy chủ render, độ trễ phản hồi cho bot khá cao (1.5s - 3s).

2. Chuyển đổi sang Static Export hoặc Modern SSR (Astro / Next.js)#

• Giải pháp triệt để và bền vững nhất: Di chuyển các trang công khai (Landing page, Blog, Danh mục sản phẩm) sang framework hỗ trợ SSR/SSG như Astro hoặc Next.js.
• Mã HTML được render hoàn chỉnh ngay trên server hoặc trong lúc build, điểm PageSpeed cao tuyệt đối, Googlebot lập chỉ mục ngay trong ngày.

Bảng so sánh chiến lược#

Góc thảo luận#

Team bạn đã từng xử lý bài toán cứu vớt SEO cho một dự án SPA cũ chưa? Bạn chọn cách dùng Prerender hay quyết định viết lại bằng framework SSR?

Xem thêm nội dung liên quan:

• Học lộ trình SEO Kỹ thuật & Frontend
• Review công cụ lập trình web