개발자
류준열

Layout Shift 제거22222

잠깐 여유가 생겨 빠르게 처리할 수 있는 Layout Shift부터 제거했다.

Table 데이터를 첫 렌더링때는 서버컴포넌트에서 받은 데이터를 보여주고, 그 이후 인터렉션이 발생하면 클라이언트에서 fetch를 할 수 있지 않을까? 라는 생각을 했다.

두가지가 맘에 걸렸다.

• 첫 렌더링때 next 서버에서 받아온 데이터를 어떻게 클라이언트 사이드 데이터로 교체 할 것인가
• next 서버에서 데이터를 받아올때 revalidateTime은 어떻게 설정해야 하는가

고민하던 중 tanstack query의 advanced serverside rendering을 보고 해답을 찾았다.

서버 컴포넌트에서 prefetchQuery를 사용해 데이터를 미리 캐싱한 후, HydrationBoundary를 활용해 클라이언트에서 즉시 데이터를 사용할 수 있도록 했다.

테이블 데이터 뿐만 아니라 유저 정보도 아래와 같이 서버컴포넌트에서 캐싱해서 로그인여부를 판별 할 수 있다.

AuthGuard(RSC)에서 데이터 prefetch

import { dehydrate, QueryClient } from '@tanstack/react-query';
import { getUserInfo } from '@/api/user';

export default async function AuthGuard() {
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery({
    queryKey: ['user','me'],
    queryFn: getUserInfo,
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
		  {children}
		</HydrationBoundary>
  );
}

이렇게 서버컴포넌트에서 prefetch를 하게 되면 ['user','me'] 에 대한 결과를 미리 캐싱하므로, 클라이언트에서 동일한 쿼리키 ['user','me']를 가진 api 가 실행되었을때 즉시 불러올 수 있다.

모든 데이터를 받는 부분에서 Layout Shift가 발생하고 있었다. 빈 데이터일때 처리가 되어있지 않아 스켈레톤을 넣거나, Wrapper에 사이즈를 고정시켜 해결했다.

롱태스크를 분석하지 않고 바로 처리 할 수 있는것만 처리했는데도 위와 같이 개선되었다.