2024.05.25 TIL #Next.js_app_router #Suspense #pre-render #팀회의

🚨  TroubleShotting

Query data cannot be undefined

라는 오류가 발생했다.

 

문제 발생의 배경 - As Is

1. Next.js의 14버전 App-router를 사용 중이다.

2. src > app > chat > page.tsx 파일에서 SideBar.tsx라는 클라이언트 컴포넌트를 import 하고 있었다.

import SideBar from '@/components/chat/sidebar/SideBar';

const ChatPage = async ({ params }: { params: { chatroom_id: string } }) => {
  ...
  return (
    <main>
      <HydrationBoundary state={dehydrate(queryClient)}>
        <Suspense fallback={<ChatLoading />}>
          ...
              <section className="lg:flex lg:max-w-96 max-sm:absolute max-sm:z-40 max-sm:bg-white min-h-[36rem] ">
                <SideBar chatRoomId={chatRoomId} /> ---> 클라이언트 컴포넌트
              </section>
          ...

3. SideBar.tsx(클라이언트 컴포넌트 - 이하 생략) 안에서는 useSuspenseQuery를 사용하고 있었고, 그렇기 때문에 ChatPage.tsx에서 SideBar.tsx를 <Suspense>로 감싸고 있었다. 

4. 그러고 localhost:3000에서 ChatPage.tsx에서 새로고침을 하면 위에 오류가 떴다.

5. 근데 이제 문제는 저 오류가 브라우저 콘솔에는 뜨지 않고 서버 측 터미널에 떴다는 것과, 브라우저 콘솔에는 아무 오류가 뜨지 않았고 데이터도 잘 받아와져서 렌더링도 잘 되었다는 것이다.

 

여기서 의문
SideBar.tsx는 클라이언트 컴포넌트이고,
React-query도 클라이언트 라이브러리인데
왜 서버 측 터미널에서 오류가 나는가?
터미널엔 오류가 나는데 브라우저에는
왜 오류 없이 데이터 fetching이 잘 되는가?

---

How(과정) ?

2개의 원인가설을 세워보았다.

 

원인가설1

 Next.js의 App-router에서는 Client 컴포넌트여도 server 측에서 pre-render 과정이 이루어지기 때문에

Rendering: Client Components | Next.js

그 과정에서 useSuspenseQuery가 실행되기 때문이다!

 

그럼 여기에 대한 또 의문점
(1) 'use client'라고 해둔 Client 컴포넌트가 pre-render로 인해서 그 로직들이 server에서 미리 실행이 된다면, useSuspenseQuery 뿐만 아니라 useState나 useEffect 같은 React hook들도 실행되어야 할텐데 왜 걔네들에 대한 오류는 터미널에 찍히지 않는지?

 

(2) 그래 프리렌더링이 원인이라고 치자. 그럼 어쨌든 서버 쪽에서 오류가 난다는 것은 빌드 시에도 오류가 나야 할텐데 왜 빌드 시에는 오류가 나지 않는지?

 

(3) 프리렌더링이 되는 좋은데, pre-렌더링이 말 그대로 "미리 서버 측에서 렌더링" 되는 거라면 왜 클라이언트에서 한번 더 렌더링이 되어 useSuspenseQuery가 실행되고 데이터를 받아오는지? 즉, 한번 pre-렌더링으로 실행됐으면 되지 왜 클라이언트 측에 한번 더 실행되는지?

 

원인가설 2

아냐 이거 프리렌더링 때문 아닌 것 같아. 이거 Suspense 때문인 것 같아.

왜냐면 다른 곳에서는 useSuspenseQuery 말고 useQuery 썼는데 이런 오류 안 나. 

이거봐. 여기서 말하길 Suspense와 SSR이 만나면 나는 Next.js의 버그래

 

SSR 환경에서 Suspense와 useSuspenseQuery가 오작동하는 문제 해결하기

 

이것에 대한 또 의문점

  (1) Suspense와 SSR이 만나면 정확히 뭐 때문에 그런건지?

 

  (2) 오케이 프리렌더링 아니라고 치자. 그럼 Suspense도 마찬가지로 처음에 undefined를 반환해서 오류를 뱉었으면 그걸로 끝이지 이것도 왜 클라이언트에서 한번 더 실행되는지?

---

Why(이유) ?

결국 이유는 두 가설의 짬뽕이었다.

Suspense가 pre-render의 대상이 되기 때문이다. 즉, SSR-Streaming의 대상이 된다.

위 링크의 Example 부분에 By using Suspense, you get the benefits of: 1.  Streaming Server Rendering 에 보면

Suspense를 사용함으로써 서버에서 rendering 할 수 있다고 나와있다.

 

(여기서 원인가설1의 (1)의 답이 나온다. pre-render가 되는 대상은 따로 있다. Suspense는 그 pre-render의 대상, 즉 서버 측 코드가 되기 때문에 react-hook 같은 client 코드와 다르게 서버에서 실행된다.)

 

Suspense는 useSuspenseQuery 내 queryFn가 반환해주는 Promise 반환값을 캐치해서, 그 값이 pending이면 streamig을 기다려주고, resolve면 Suspense 바운더리 안의 컴포넌트를 렌더링 해준다. 

 

그렇기 때문에 서버 측에서 Suspense를 위한 useSuspenseQuery가 실행되는 것이었고, 문제는 useSuspenseQuery의 queryFn(fetchChatData) 내에서 서버 측에서 실행될 시점에 clientSupabase를 사용하고 있기 때문에 오류가 발생하는 것이다. 

export const fetchChatData = async (chatRoomId: string) => {
  console.log('aaaa', chatRoomId);
  const { data: chatData, error: chatDataErr } = await clientSupabase ---> 클라이언트 함수
    .from('chatting_room')
    .select('*')
    .eq('chatting_room_id', chatRoomId)
    .single();
  if (chatDataErr) {
    throw chatDataErr;
  } else {
    return chatData;
  }
};

 

원인가설들의 의문점 중 하나인 "왜 한번 더 실행되는지"는 아마 서버 측에서 queryFn을 실패했을 때, 클라이언트 측에서 재실행하는 옵션이 있을 것 같다는 결론을 지었다.

---

원인은 이제 알았다. 그럼 해결방법은?

what(결과) - To Be

총 세 가지의 의견이 나왔다.

1. Next.js 공식문서에 lazy-loading > Skipping SSR 부분에 Client 컴포넌트의 pre-rendering을 원하지 않으면, Server 컴포넌트에서 Suspense로 코드스플리팅 한 부분 = Client 컴포넌트(여기선 SideBar.tsx)를 import 하는 것 자체를 dynamic, {ssr: false} 옵션을 걸자!

 

시도결과 -> 오류 해결

// src > app > chat > .. > page.tsx
...
// import SideBar from '@/components/chat/sidebar/SideBar';
const SideBarWrapper = dynamic(() => import('@/components/chat/sidebar/SideBar'), { ssr: false });

const ChatPage = async ({ params }: { params: { chatroom_id: string } }) => {
 ...
  return (
    <main>
      <HydrationBoundary state={dehydrate(queryClient)}>
        <Suspense fallback={<ChatLoading />}>
              <section className="lg:flex lg:max-w-96 max-sm:absolute max-sm:z-40 max-sm:bg-white min-h-[36rem] ">
                <SideBarWrapper chatRoomId={chatRoomId} />  --> SideBar를 SideBarWrapper로 변경
              </section>
  ...

 

2.  그것보다는 pre-render를 허용해서 미리 data를 잘 받아오면 로딩 속도도 빨리질 것 같은데, 그냥 queryFn 내의 ClientSupabase를 window의 type에 따라서 server 측에서는 serverSupabse() 사용하고 client 측에서는 clientSupabase() 사용하도록 조건문 걸어보자! 

 

시도결과 -> 다른 오류 발생

const getSupabase = () => {
  if (typeof window === undefined) {
    const supabase = serverSupabase();
    return supabase;
  } else {
    return clientSupabase;
  }
};

export const fetchChatData = async (chatRoomId: string) => {
  console.log('aaaa', chatRoomId);
  const { data: chatData, error: chatDataErr } = await getSupabase()
    .from('chatting_room')
    .select('*')
    .eq('chatting_room_id', chatRoomId)
    .single();
  if (chatDataErr) {
    throw chatDataErr;
  } else {
    return chatData;
  }
};

 

하지만

이렇게 하면 다음과 같은 다른 오류가 발생한다.

serverSupabase() 함수는 오직 server 컴포넌트에서만 사용가능한데, 우리는 지금 fetchChatData라는 useSuspenseQuery의 queryFn을 client 컴포넌트에서 사용하고 있어서 인 것 같다.

---

💡 새롭게 알게된 점

Nest.js의 app-router에서는 "use client"를 사용했다고 해서 완전한 CSR은 아닐 수 있다.

왜냐하면? pre-rendering이 되기 때문이다.

SSR과 CSR의 hybrid 정도라고 할 수 있을 것 같다.