Tiếp theo + Tạo dịch vụ SNS bằng React Query

Xin chào. Đó là 0 giây.

Mình nghĩ React 19 và Next 15 sẽ sớm ra mắt, nếu có bản chính thức trong tháng 12 mình sẽ sản xuất và upload thêm video theo chính sách bài giảng. Chúng tôi dự định quay lại nhiều phần khó hiểu trước đây (chẳng hạn như xác thực tiếp theo và phát trực tuyến).

Có rất nhiều thắc mắc liên quan đến Streaming và Suspense (chúng thường được giới thiệu cho SSR và SEO phải không?), nên tôi đã tóm tắt dưới đây. Nếu bạn có thắc mắc gì thêm xin vui lòng để lại câu hỏi.

Cảm ơn

Giấc mơ của Cho Hyun-young.

Giới thiệu: Trước hết mình đã trình bày ứng dụng SSR cho bài giảng nhưng không cần SSR hay SEO cho danh sách bài viết được đề xuất. Bởi vì các bài viết thay đổi mỗi lần. Chỉ áp dụng SEO cho các trang bài đăng riêng lẻ (/post/[id]).

Nếu không có loading.tsx và tìm nạp trước

1. Trường hợp duy nhất mà SSR nội dung được bật (tuy nhiên, nếu độ trễ được đặt trong handlers.ts thì lần tải đầu tiên sẽ mất nhiều thời gian)

2. SSR được bật nhưng màn hình chỉ hiển thị sau khi tìm nạp trước, điều này có thể gây khó chịu cho người dùng.

Nếu không có loading.tsx và chỉ useSuspenseQuery

1. Có lẽ vì không có phần dự phòng nên vô số yêu cầu được gửi đi (sử dụng

2. Có thể giải quyết bằng https://github.com/TanStack/query/issues/6116#issuecomment-1904051005

Nếu có loading.tsx và tìm nạp trước

1. Bài đăng xuất hiện 3 giây sau khi loading.tsx xuất hiện. Vì vậy, không có SSR

2. Thông tin SEO phải được nhập thông qua siêu dữ liệu hoặc generateMetadata.

Nếu có loading.tsx thì còn một đoạn hồi hộp nữa là có tìm nạp trước.

1. Dự phòng hồi hộp xuất hiện và một bài đăng xuất hiện sau 3 giây. Vì vậy, SSR là không thể.

2. SSR nội dung không hoạt động. Thông tin SEO phải được nhập thông qua siêu dữ liệu hoặc generateMetadata.

Nếu có loading.tsx nhưng không tìm nạp trước

1. SSR nội dung không hoạt động. Thông tin SEO phải được nhập thông qua siêu dữ liệu hoặc generateMetadata.

2. Khi isPending: true, bạn phải tự viết mã để hiển thị đang tải.

Những gì chúng ta biết cho đến nay: loading.tsx cũng là một loại Hồi hộp và Hồi hộp hoạt động nếu có prefetchQuery hoặc useSuspenseQuery.

Nếu có sự hồi hộp giữa loading.tsx và prefetchQuery, cái ở giữa sẽ hoạt động. Lý do là loading.tsx cũng là Suspense nên nếu cấu trúc Suspense đang loading.tsx->Middle Suspense->prefetchQuery thì prefetchQuery sẽ bị kẹt ở giữa Suspense.

Khi có loading.tsx và Suspense + useQuery và không tìm nạp trước

1. Loading.tsx không hoạt động và Suspense không hoạt động. isPending: hiển thị tải đúng

Nếu có loading.tsx và Suspense + useSuspenseQuery và không tìm nạp trước

1. Loading.tsx không hoạt động và dự phòng Hồi hộp được hiển thị đang tải.

2. Nó không hiệu quả vì nó được yêu cầu hai lần, một lần từ máy chủ và một lần từ quầy lễ tân.

   Khi có loading.tsx và useSuspenseQuery được sử dụng mà không có Suspense

1. Được viết bởi loading.tsx.

2. Nó không hiệu quả vì nó được yêu cầu hai lần, một lần từ máy chủ và một lần từ quầy lễ tân.

Phần kết luận:

1. Nếu bạn muốn SSR hoàn hảo về tổng thể, chỉ cần sử dụng loading.tsx & prefetchQuery mà không có Hồi hộp riêng biệt.

2. Không sử dụng dòng useSuspense vì nó có vấn đề.

3. Thay vào đó, nếu bạn có thể thực hiện SEO bằng siêu dữ liệu, thì bạn có thể sử dụng prefetchQuery với trình tải Suspense hoặc useQuery + isPending mà không có Suspense. Cái trước được lấy từ máy chủ và cái sau được lấy từ máy khách. Tôi cũng không làm SSR, vì vậy không có lý do gì để chọn cái trước, vì vậy tôi khuyên bạn nên làm cái sau.

4. Tiêu chí để chọn sử dụng loading.tsx hay hệ thống treo riêng: Loading.tsx tải toàn bộ trang, vì vậy nếu bạn chỉ muốn tải một phần của trang, hãy sử dụng hệ thống treo riêng.

5. Hồi hộp không được sử dụng trong bố cục.tsx.