template.tsx 에서 서버 fetch 후 클라이언트 컴포넌... - 인프런

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

template.tsx 는 언제 필요할까?

template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유

해결된 질문

작성

수정됨

아래 코드와 같이 template.tsx에서 서버fetch 후 사용처인 클라이언트 컴포넌트로 props 넘겨주도록 세팅해놓았습니다.


//template.tsx 자식 컴포넌트
export default async function Sidebar() { 

const { isSucceed, body } = await getUserGetInfo(params);

return (
    <SidebarLayout>
      <GiftIcon isNewGift={!!body?.info.new_gift} />


'use client'

export default function GiftIcon({ isNewGift }: { isNewGift: boolean }) {
const { onClose } = useModal('SIDEBAR');

return (
<Link
className={isNewGift ? cn(st['active']) : ''}
///
 <Icon type="Present" title="선물함" w={25} h={25} />

이 상태에서 next 페이지 이동 시 서버fetch는 리렌더링 되는것을 확인했는데

이상하게 클라이언트는 리렌더링이 되지 않습니다. 즉 서버 응답값은 상태가 바뀌어도 클라이언트 상태값은 바뀌지 않더라구요... 왜 이런걸까요ㅠㅠㅠ

react typescript next.js

답변 1

Boaz

지식공유자

이런 경우 문제 원인이 다양할 수 있어서요.

혹시 클라이언트 라우팅이 route segment 는 그대로이고, searchParams 가 바뀌는 형식일까요?
(예를 들어 /gift-item -> /gift-list 의 이동이 아닌, /gift-item?id=1 -> /gift-item?id=2 처럼요)

만약 위와 같은 이동(searchParams 만 바뀜)이라면 template.tsx 도 리렌더링이 발생하지 않아서 여쭤봅니다 🙏

변재정

질문자

아 제가 착각했습니다. 정상적으로 클라이언트 상태값 읽는거 확인했습니다😅

답변 감사합니다!!

인프런 커뮤니티 질문&답변

template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유