[NEXT] - STANDARD플러스주차 복습 #6

오늘은 코드리뷰를 했다.

 

 

queryClient 생성 컨벤션

 

export default function Providers({ children }: Props) {
	 const [queryClient] = useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={false} />
      {children}
    </QueryClientProvider>
  );
}

 

 

 

page.tsx 상단에 “use client” 선언하지 않는 것을 권장합니다.

 

use client 아래에 있는 코드들은 모두 JS번들파일이 됩니다. 정적인 부분들은 굳이 JS 번들파일이 될 필요가 없습니다.

 

• loading.tsx 를 전역적으로 선언하는 방식을 권장드리지 않습니다.
• SSG 컴포넌트나 CSR 컴포넌트에서도 찰나에 로딩화면에 보였다가 사라질 수 있어, 사용자 입장에서 깜빡이는 현상으로 보여 UX 에 좋지 않은 영향을 미칠 수 있습니다.
• loading.tsx 는 SSR 페이지를 위해서만 사용하는 것을 권장 드립니다.

 

 

 

 

Providers 는 global layout에 적용합시다.

tanstack query를 사용하는 CSR 페이지에만 적용하면 되니까 해당 segment layout 별도로 만들어서 적용하시면 상태유지가 안됩니다.