Helpex - Trao đổi & giúp đỡ Đăng nhập
4

Tôi có một ứng dụng React isomorphic / Universal, nghĩa là nó được hiển thị trên máy chủ bởi cùng một JS cung cấp trải nghiệm người dùng Ứng dụng Trang đơn, phía máy khách.

Tôi định cấu hình DNS của ứng dụng này bằng Cloudflare và sử dụng tính năng "đám mây màu cam" của họ để tăng tốc và bảo vệ lưu lượng truy cập trang web của tôi, như được giải thích trong hình sau và trong bài viết hỗ trợ của họ :

Ứng dụng React 15 isomorphic / được hiển thị trên toàn cầu ngắt với Cloudflare HTTP Proxy (“đám mây màu cam”)

Từ bài viết được liên kết đến: "Cloudflare có thể hoạt động ở hai chế độ - chỉ DNS (không được hỗ trợ; 'đám mây xám') và như một proxy HTTP ('đám mây màu cam') với các tính năng bảo mật, CDN & hiệu suất của chúng tôi."

Tôi đã phát hiện ra rằng việc chạy ứng dụng của mình với React 15 và tính năng HTTP Proxy "đám mây màu cam" của Cloudflare dẫn đến lỗi:

reactProdInvariant.js: 31 Lỗi chưa tìm thấy: Lỗi React được thu nhỏ # 32; hãy truy cập http://facebook.github.io/react/docs/error-decoder.html?invariant=32&args[]=2 để biết thông báo đầy đủ hoặc sử dụng môi trường nhà phát triển không được rút gọn để biết toàn bộ lỗi và các cảnh báo hữu ích khác.

Văn bản của lỗi được liên kết đến:

Không thể tìm thấy phần tử có ID 2.

ID này có thể đề cập đến headthẻ của trang của tôi:

<!doctype html>
<html lang="en-us" data-reactroot="" data-reactid="1" data-react-checksum="-1233854461"><head data-reactid="2">...

Tôi KHÔNG gặp sự cố này với React 14.

Tôi KHÔNG gặp lỗi này khi sử dụng địa chỉ thô, chưa có DNS của ứng dụng của mình, cũng như không gặp lỗi khi chuyển sang "đám mây xám" để chỉ sử dụng Cloudflare như một dịch vụ DNS.

Tôi KHÔNG gặp sự cố này khi tắt hiển thị phía máy chủ.


Khi tôi google văn bản của lỗi được liên kết với "thực tế", tôi tìm thấy chuỗi Github này xác nhận rằng điều này có liên quan đến kết xuất phía máy chủ.

Tuy nhiên, tình huống của tôi hơi khác: tác giả của chuỗi đó gặp lỗi với ID "không thể tìm thấy phần tử" đề cập đến stylethẻ, trong khi trong trường hợp của tôi, ID phần tử không liên kết đề cập đến headthẻ.


Khi tôi google văn bản về lỗi sản xuất "bị bọc", tôi tìm thấy chuỗi Github này xác nhận rằng điều này có liên quan đến HTTP Proxy của Cloudflare. Nhận xét này có nội dung : "Nếu bạn đang sử dụng CloudFlare, vui lòng tắt tính năng tự động thu nhỏ HTML."

Cho đến nay, tôi không thể tìm ra cách để làm điều đó. Thật khó để tôi tìm thấy thông tin tốt về những gì Cloudflare thực hiện chính xác với HTTP Proxy của họ và cách tôi có thể định cấu hình nó.


Câu hỏi:

  • Chính xác thì tại sao lỗi này lại xảy ra?
  • Tôi có thể tìm thông tin về "đám mây màu cam" chính xác ở đâu?
  • Cách tốt nhất để khắc phục sự cố này trong khi vẫn duy trì các lợi ích của HTTP Proxy của Cloudflare là gì?
4 hữu ích 1 bình luận 1.7k xem chia sẻ
7

React trên máy chủ cần kết xuất ứng dụng thành một chuỗi HTML phù hợp với trình duyệt. Đồng thời, React trong trình duyệt cần đọc HTML này và hiểu nó liên quan đến mã JS của bạn: nó cần xác định cây DOM đến từ thành phần React nào, một cách rất chi tiết. Do đó, trên thực tế, HTML trung gian là một định dạng tuần tự hóa giữa React trên máy chủ và React trên máy khách với một yêu cầu bổ sung để nó có ý nghĩa đối với trình duyệt ngay cả khi không có React.

Khi bạn bật chức năng Cloudflare nâng cao, nó sẽ coi HTML như một HTML “thông thường”, không phải là các trình biên dịch được kết xuất phía máy chủ ưa thích. Suy đoán vô căn cứ của tôi về một điều có thể xảy ra sai lầm là loại bỏ các nhận xét HTML. Nói chung, đây là điều đương nhiên phải làm để thu nhỏ. Nhưng React sử dụng các chú thích HTML để đặt một <!-- empty -->trình giữ chỗ nơi một thành phần React trả về null. Đương nhiên, loại bỏ các lỗi React này.

Cloudflare có mặt để cung cấp các trang web nhanh hơn với chi phí thấp hơn. Họ có rất nhiều công cụ để đạt được điều đó, hãy xem hướng dẫn giới thiệu của họ . Giảm thiểu HTML là hoàn toàn tự nhiên và thật đáng tiếc là nó phá vỡ trường hợp sử dụng của bạn, nhưng đây là những gì chúng ta nhận được khi ý nghĩa của các nút và thuộc tính cũng như tính linh hoạt khi thay đổi chúng trong HTML của chúng ta không được xác định chặt chẽ.

Tôi nghĩ rằng cách dễ dàng nhất để bạn tiếp tục hiện tại là tắt tính năng rút gọn HTML trong cài đặt Cloudflare .

7 hữu ích 3 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ reactjs dns cloudflare http-proxy isomorphic-javascript , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading