Next + Create a SNS service with React Query

Hello. This is Zerocho.

React 19 and Next 15 are coming out soon. If the official versions are released within December, I will produce additional videos and upload them according to the lecture policy. I also plan to re-film many parts that were confusing in the past (such as next-auth and streaming).

There are a lot of inquiries about Streaming and Suspense (usually they are introduced for SSR and SEO, right?), so I have summarized them below. If you have any further questions, please leave a question.

thank you

Jo Hyun-young's dream.

Introduction: I showed you how to apply SSR for the lecture, but there is no need to apply SSR to the list of recommended posts, nor is there any need for SEO for the list. This is because the posts change every time. You only need to apply SEO to individual post pages (/post/[id]).

If there is no loading.tsx and there is prefetch

1. The only case where content is SSRed (however, if a delay is set in handlers.ts, the first loading takes a long time)

2. SSR is done, but the screen is visible only after prefetch is finished, so users may feel frustrated.

If there is no loading.tsx and only useSuspenseQuery

1. Infinite requests are sent because there is no fallback part (not used)

2. Can be solved with https://github.com/TanStack/query/issues/6116#issuecomment-1904051005

If there is loading.tsx and prefetch,

1. loading.tsx appears and the post appears 3 seconds later. Therefore, SSR is not possible.

2. You need to enter SEO information using metadata or generateMetadata.

If there is loading.tsx, there is also one more Suspense and prefetch

1. Suspense fallback appears and the post appears 3 seconds later. Therefore, SSR is not possible.

2. Content SSR is not possible. SEO information must be entered using metadata or generateMetadata.

If there is loading.tsx but no prefetch

1. Content SSR is not possible. SEO information must be entered using metadata or generateMetadata.

2. isPending: You have to code it yourself to show loading when true

What we can understand so far: loading.tsx is also a type of Suspense, and Suspense works when there is a prefetchQuery or useSuspenseQuery.

If there is a Suspense between loading.tsx and prefetchQuery, the middle one will work. The reason is that loading.tsx is also Suspense, so if the Suspense structure is loading.tsx->middle Suspense->prefetchQuery, prefetchQuery will be affected by the middle Suspense.

If you have loading.tsx and Suspense + useQuery and no prefetch

1. Loading.tsx not working and Suspense not working. Loading of isPending: true is shown.

If you have loading.tsx and Suspense + useSuspenseQuery and no prefetch

1. Loading.tsx not working and loading of Suspense fallback is shown

2. It is inefficient because it requests twice, once from the server and once from the front.

   If you have loading.tsx and use useSuspenseQuery without Suspense

1. Use loading.tsx.

2. It is inefficient because it requests twice, once from the server and once from the front.

conclusion:

1. If you want SSR to be perfect overall, just use loading.tsx & prefetchQuery without separate Suspense.

2. There is a problem with the useSuspense series, so do not use it.

3. If you can replace SEO with metadata, you can use prefetchQuery with Suspense or use useQuery + isPending loader without Suspense. The former is fetched from the server, and the latter is fetched from the client. There is no reason to do the former when you don't do SSR, so I recommend the latter.

4. Criteria for choosing whether to use loading.tsx or a separate Suspense: Loading.tsx loads the entire page, so if you want to load only a part, use a separate Suspense.

5. Suspense does not work in layout.tsx