Vượt qua hạn chế của SPA

Các ứng dụng trang đơn (Single Page Applications - SPA) như Vue.js mang lại tốc độ và trải nghiệm người dùng tuyệt vời. Các hiệu ứng chuyển cảnh mượt mà và quản lý trạng thái nhanh chóng giúp việc phát triển trở nên dễ dàng.

Bạn sẽ gặp vấn đề nếu doanh nghiệp của bạn phụ thuộc vào lưu lượng truy cập tìm kiếm tự nhiên. Các bot của công cụ tìm kiếm thường chỉ thấy một khung HTML trống rỗng khi chúng truy cập vào một SPA. Google xử lý JavaScript khá chậm, trong khi các công cụ tìm kiếm khác thậm chí còn gặp khó khăn trong việc lập chỉ mục nội dung của bạn.

Chúng tôi đã xây dựng Global Full-Stack Developer (GFD) bằng Vue 3. Chúng tôi cần tối ưu SEO mà không muốn chuyển toàn bộ mã nguồn sang một framework Server-Side Rendering (SSR) như Nuxt.

Chúng tôi đã chọn prerendering tại thời điểm build (build-time prerendering).

Prerendering chuyển đổi các route cụ thể thành các tệp HTML tĩnh trong quá trình build. Khi một bot truy cập trang web của bạn, nó sẽ nhận được một tài liệu HTML đầy đủ, thay vì chỉ là một thẻ div trống.

Chúng tôi đã sử dụng vite-plugin-prerender cho thiết lập Vite của mình.

Hãy làm theo các bước sau để triển khai:

  1. Cài đặt plugin dưới dạng một dependency phát triển: npm install vite-plugin-prerender -D

  2. Cấu hình vite.config.js của bạn để liệt kê các route.

  3. Chạy lệnh build của bạn.

Phương pháp này mang lại lợi ích SEO cho bạn mà không cần đến sự phức tạp của SSR toàn phần.

Nguồn: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd