Chi Thanh DangCuộc Đánh Giá "Render on Fetch" vs "Fetch on Render": Một lần Dòng Sâu
Giới Thiệu
Video này là một chút hỗn loạn, và toàn bộ đều là vì một bài báo tuyệt vời của Boba về việc định vị dữ liệu trong các component React. Tôi đã bị kích động khá mạnh mẽ suốt bài viết, và kết quả là một biểu đồ (tôi đã dành quá nhiều thời gian vào) mà tôi nghĩ có thể làm sáng tỏ nhiều sai lầm về việc lấy dữ liệu React.
Cuộc Đánh Giá
Gần đây, cộng đồng React đã trải qua một chút drama, và tôi không ở đây để kể lại toàn bộ saga. Nhưng, để tóm tắt ngắn gọn, đã có một cuộc tranh luận về cách lấy dữ liệu tốt nhất trong các ứng dụng React. Hai cách tiếp cận là "render on fetch" và "fetch on render". Cách trước tiên là lấy dữ liệu và sau đó hiển thị component, trong khi cách sau tiên là hiển thị component và sau đó lấy dữ liệu.
Vấn Đề với Server-Side Waterfalls
Một trong những vấn đề lớn nhất với server-side waterfalls là chúng yêu cầu một lượng tải cognitive đáng kể. Bạn cần xác định người dùng, lấy dữ liệu và sau đó hiển thị component. Điều này có thể dẫn đến phức tạp và làm khó khăn hơn để tối ưu hiệu suất.
Lợi Ích của Collocation
Collocation, mặt khác, cho phép bạn lấy dữ liệu và hiển thị component cùng lúc. Cách tiếp cận này có nhiều lợi ích, bao gồm:
- Giảm tải cognitive
- Cải thiện hiệu suất
- Đơn giản hóa việc lấy dữ liệu
Phức Tạp của RSCs
Mặc dù Render-as-You-Fetch (RSC) giải quyết một số vấn đề với server-side waterfalls, nó lại giới thiệu một loạt phức tạp mới. RSCs yêu cầu một danh sách kiểm tra nặng nề về dữ liệu hoisting, router compiler, convention và hơn thế nữa. Điều này có thể quá tải cho các nhà phát triển, đặc biệt là những người mới bắt đầu với React.
Tầm Quan Trọng của DX
Cuối cùng, chúng ta đều ở đây vì chúng ta yêu thích React và muốn tiếp tục đẩy trải nghiệm phát triển (DX) đi trước. Chúng ta cần tìm cách giải quyết vấn đề với việc lấy dữ liệu React mà không làm cho nó cảm giác như một thư viện khác.
Kết Luận
Tóm lại, cuộc tranh luận "render on fetch" vs "fetch on render" là một vấn đề phức tạp, và không có một giải pháp phù hợp với tất cả. Chúng ta cần tìm cách đơn giản hóa việc lấy dữ liệu trong React mà không làm tổn hại đến DX chúng ta yêu thích. Cảm ơn Boba vì đã viết bài báo đã truyền cảm hứng cho video này, và xin hãy xem và chia sẻ để biểu đồ tôi đã dành quá nhiều thời gian vào có giá trị!
