Next 15 관련 영상제작 안내 & SSR + SEO, Streaming, Suspense 관련 정리

제로초(조현영) 프로필
작성자 : 제로초(조현영) 6개월 전 (6개월 전 수정됨)
연관강의 : Next + React Query로 SNS 서비스 만들기

안녕하세요. 제로초입니다.

곧 리액트 19, Next 15가 나올 것 같은데 12월 안에 정식 버전이 나온다면 강의 정책대로 영상 추가 제작해서 올리겠습니다. 기존에 헷갈려하셨던 부분도 대거 재촬영 예정입니다(next-auth, Streaming 같은 것).

Streaming, Suspense 관련해서 문의가 많아서(보통은 SSR, SEO를 위해서 도입하곤 하시죠?) 아래에 정리해보았습니다. 더 궁금하신 점 있으면 질문 남겨주시면 됩니다.

감사합니다.

조현영 드림.

서론: 일단 강의를 위해 SSR을 적용한 걸 보여줬지만 추천게시글 목록 같은 것은 SSR할 필요도, 목록에 대한 SEO도 필요 없음. 매번 게시글이 바뀌기 때문. 개별 게시글 페이지(/post/[id]) 같은 것만 SEO 적용할 것.

loading.tsx 없고 prefetch 있는 경우

  1. 유일하게 컨텐츠 SSR 되는 케이스(다만 handlers.ts에서 delay를 걸어둔 경우 첫 로딩이 오래걸림)

  2. SSR이 되나 prefetch가 끝나야 화면이 보이므로 사용자가 답답해할 수 있음

loading.tsx 없고 useSuspenseQuery만 있는 경우

  1. fallback 부분이 없어서 그런지 무한 요청 보내짐(사용X)

  2. https://github.com/TanStack/query/issues/6116#issuecomment-1904051005 로 해결 가능

loading.tsx 있고 prefetch 있는 경우는

  1. loading.tsx가 뜨고 3초 뒤에 게시글이 뜸. 따라서 SSR 안 됨

  2. metadata나 generateMetadata로 SEO 정보 넣어줘야 함

loading.tsx 있는데 Suspense도 하나 더 있고 prefetch는 있는 경우

  1. Suspense fallback이 뜨고 3초 뒤에 게시글이 뜸. 따라서 SSR안 됨

  2. 컨텐츠 SSR 안 됨. metadata나 generateMetadata로 SEO 정보 넣어줘야 함

     

loading.tsx 있는데 prefetch는 없는 경우

  1. 컨텐츠 SSR 안 됨. metadata나 generateMetadata로 SEO 정보 넣어줘야 함

  2. isPending: true일 때 로딩 보여주게 직접 코딩해야 함

여기까지 알 수 있는 점: loading.tsx도 Suspense의 일종이고, Suspense는 prefetchQuery나 useSuspenseQuery가 있는 경우 작동한다.

loading.tsx와 prefetchQuery 중간에 Suspense가 있으면 중간 것이 작동한다. 그 이유는 loading.tsx도 Suspense라서 Suspense구조가 loading.tsx->중간 Suspense->prefetchQuery이면 prefetchQuery는 중간 Suspense에 걸림.

loading.tsx 있고 Suspense + useQuery 있고 prefetch 없는 경우

  1. Loading.tsx 작동 안하고 Suspense 작동 안 함. isPending: true의 로딩이 보여짐

loading.tsx 있고 Suspense + useSuspenseQuery 있고 prefetch 없는 경우

  1. Loading.tsx 작동 안하고 Suspense fallback의 로딩이 보여짐

  2. 서버에서 한번, 프론트에서 한 번 총 두 번 요청하므로 비효율

     

     

    loading.tsx 있고 Suspense 없이 useSuspenseQuery 쓰는 경우

  1. loading.tsx 씀.

  2. 서버에서 한번, 프론트에서 한 번 총 두 번 요청하므로 비효율

결론:

  1. SSR이 전체적으로 완벽하게 되길 원하면, loading.tsx & 별도 Suspense 없이 prefetchQuery만 사용

  2. useSuspense 시리즈 문제 있으므로 쓰지 말 것

  3. SEO를 metadata로 대신 할 수 있다면 Suspense를 두고 prefetchQuery하거나 Suspense 없이 useQuery + isPending 로더 쓰면 됨. 전자는 서버에서 가져오는 것이고, 후자는 클라이언트에서 가져오는 것. SSR도 안 하는데 전자로 할 이유 없으므로 후자 추천

  4. loading.tsx를 쓸지 별도의 Suspense를 둘지 선택하는 기준: Loading.tsx는 페이지 전체를 로딩하므로 부분만 로딩하고 싶다면 별도의 Suspense 사용

  5. layout.tsx에서는 Suspense 안 먹음

현민 프로필
현민 6개월 전 저만 nextauth 부분이 헷갈렸던게아니군..요
fefefefe 프로필
fefefefe 6개월 전 저도 nextauth에 요구하는 정보 외에도 실무 프로젝트에서는 여러가지를 넘겨줄게 뻔하다 생각이 들어서.. declare 걸고 client 컴포넌트에서 계속 서버 오류값 안주다 보니까 getSession인가 써서 다시 가져오고 별짓을 다한 것 같네요 ㅋㅋ 여튼 확실하게 챙겨서 다시 돌려주시니까.. 항상 감사합니다.
김단우 프로필
김단우 6개월 전 !!! 최고네요! 항상 감사합니다!
류호이 프로필
류호이 1개월 전 감사합니다 ~~
채널톡 아이콘