[노철] - 페이지 서버컴포넌트 변경

[qkdl60]

📌 이슈 번호

• close [노철] - 마이페이지, 계획 페이지 서버 컴포넌트 적용( prefetch)  #493

🚀 구현 내용

-현재 마이 페이지 서버 컴포넌트를 통한 prefetch 적용

📘 참고 사항

서버 컴포넌트에서 prefetch 설명 react-query 공식 문서

prefetch 설명 블로그

• page 최상단은 서버 컴포넌트로 react-query의 prefetch를 통해서 데이터를 fetch 합니다.
• 기존의 페이지 내용은 컴포넌트로 묶어서 hydrationBoundary의 children으로 넣어줍니다. 그리고 prefetch를 한 queryClient를 hydrationBoundary 통해서 넘겨줍니다.
• 서버 컴포넌트에서 사용될 api 함수는 axiosInstanceServer 를 통해서 새로 만들어야 합니다.
• 기존에 query 함수는 useSuspenseQuery를 썼는데 useQuery로 변경해야 합니다. ( 공식 문서에서는 useSuspenseQuery 대신 useQuery를 추천하고 있습니다. )
• useQuery 변경은 팀적으로 이야기가 필요할 것 같습니다. useQuery 사용 시 data 가 보장 되지 않아 사용 시 문제가 있을 수 있습니다. 일단 useSuspenseQuery()를 쓰시면 됩니다.

❓ 궁금한 내용

• 토큰 만료 시 서버에서는 쿠키를 변경 할 수 없어서 어떻게 할 지 고민입니다.
  • 현재 상황은 서버에서 prefetch시 토큰 만료로 실패를 한다면, client component는 아무것도 없는 queryclient를 전달 받아서 clientComponent에서 api 요청을 다시 보내고 interceptor가 작동되며 쿠키가 업데이트 됩니다
• 에러시 errorboundary로 넘어가는데 좀 더 에러 관련된 고민이 필요해 보입니다.
• 계획 수정 페이지 적용 여부, 계획 수정 페이지는 계획 상세 페이지를 통해서 들어가서 상세 페이지에서 캐싱된 데이터를 사용할 수 있습니다, 이 페이지도 prefetch를 적용하는게 좋을지 고민입니다.

[MinwooP]

고생 너무 많으셨습니다 노철님!!
서버에서 prefetch -> dehydrate -> 클라에서 hydrate 야무지게 적용하셨네요 👍🏻

몇 가지 제 생각을 이야기해보자면,

1. 서버 컴포넌트 렌더링 시 로딩이 살짝 뜨는 현상

출처

위 블로그 글 내용처럼, 저희가 MyPage에 접근을 하면, my/page.tsx 라는 서버 컴포넌트의 html 내용을 만들기 위해, 서버에서 await prefetching ~도 하고, 이 data를 바탕으로 html을 만드는 과정도 필요하니, 그 시간 동안 클라이언트에서는 로딩을 보여주는 것 같습니다.

그래서 그 html을 서버에서 만드는 동안 브라우저에서는 suspense가 로딩 스피너를 보여주고, 서버 컴포넌트가 렌더링된 후 하위 클라이언트 컴포넌트인 MyPageContent도 렌더링을 시작하는 것 같아요. 이 때는 queryClient에 data가 있으니 useSuspenseQuery에서는 로딩을 던지지 않고 바로 data를 보여줄 수 있는 것 같아요.

근데 위 내용을 바탕으로 하면, 클라이언트 컴포넌트에서 useQuery를 써도 data는 존재한 상태에서 렌더링 되는거니 에러가 안떠야하는데,, 지금은 에러가 뜬다는거죠? ㅠ 좀 더 생각해봅시다,,,

2. 계획 수정 페이지 서버 컴포넌트 적용 여부

pr에서 말씀해주신대로, 계획 수정 페이지는 계획 상세 페이지를 통해 접근이 가능한 구조이고, 상세 페이지에 접근했을 때 이미 계획에 대한 data를 가져왔을 것입니다.

따라서 지금처럼 클라이언트 컴포넌트로 유지하면 data를 새로 불러오지 않고 캐싱 데이터를 사용할 수 있지만, 만약 서버 컴포넌트로 변경해서 prefetch한다면 서버에서 data를 불러오고 html을 만들줘야하기 때문에, data fetching이 사실상 한번 더 이루어져서 시간이 오히려 더 걸리지 않을까?? 라고 생각했습니다.

[MinwooP]

Image 태그에 priority 속성을 추가하심으로써 기본적으로 적용되는 lazy loading을 해제해주신 건가요??

[MinwooP]

login 페이지를 다시 보니 클라이언트 컴포넌트로 설정해줄 이유가 없었군요!! 그래서 빼주신거죠??