Tôi đang sử dụng Bộ phản ứng và Bộ phản ứng trong ứng dụng web đơn trang của mình. Vì tôi đang thực hiện kết xuất phía máy khách, tôi muốn phục vụ tất cả các tệp tĩnh của tôi (HTML, CSS, JS) với CDN. Tôi đang sử dụng Amazon S3 để lưu trữ các tệp và Amazon CloudFront làm CDN.React Router + AWS Backend, cách SEO
Khi người dùng yêu cầu /css/styles.css, tệp tồn tại để S3 phân phát. Khi người dùng yêu cầu/foo/bar, đây là một URL động nên S3 thêm một hashbang:/#!/Foo/bar. Điều này sẽ phục vụ index.html. Về phía khách hàng của tôi, tôi xóa hashbang để URL của tôi khá đẹp.
Tất cả đều hoạt động tốt cho 100% người dùng của tôi.
- Tất cả các file tĩnh được phục vụ thông qua một CDN
- Một URL động sẽ được chuyển đến/#!/{...} phục vụ index.html (ứng dụng trang duy nhất của tôi)
- phía Khách hàng của tôi loại bỏ các hashbang nên URL là khá một lần nữa
vấn đề
vấn đề là Google sẽ không thu thập trang web của tôi. Dưới đây là lý do:
- Google yêu cầu/
- Họ thấy một loạt các liên kết, ví dụ đến/foo/bar
- Google yêu cầu/foo/bar
- Họ được chuyển đến/#!/foo/bar (302 Found)
- Họ loại bỏ các hashbang và yêu cầu/
Tại sao hashbang bị xóa? Ứng dụng của tôi hoạt động tốt với 100% người dùng của tôi, vậy tại sao tôi cần thiết kế lại ứng dụng theo cách như vậy để Google thu thập dữ liệu đúng cách? Đó là năm 2016, chỉ cần làm theo các hashbang ...
</rant >
Tôi có làm điều gì sai? Có cách nào tốt hơn để có được S3 để phục vụ index.html khi nó không nhận ra đường dẫn?
Thiết lập máy chủ nút để xử lý các đường dẫn này không phải là giải pháp chính xác vì nó đánh bại toàn bộ mục đích của việc có CDN.
In this thread Michael Jackson, cộng tác viên hàng đầu cho React Router, cho biết "Rất may hashbang không còn được sử dụng rộng rãi nữa". Làm thế nào bạn sẽ thay đổi thiết lập của tôi để không sử dụng hashbang?
Đây là những gì tôi đã kết thúc, thực hiện hacky nhưng nó hoạt động. Cảm ơn vì đăng!!! –