[Next.js] 페이지 성능 개선하기 3 - API Prefetch 하기

 

모바일 기준, 성능 점수

 

 

두 차례 성능 최적화를 진행하고 측정했던 성능 점수입니다.

지난 이야기... 👇

 

 

[Next.js] 페이지 성능 개선하기 2 - 번들 사이즈 개선, Tree Shaking

 

 

 

 

 

이번 포스팅으로 이번 시리즈(?)를 마무리해볼까 합니다.

배너 이미지(LCP)가 늦게 렌더링 되는 원인은 API 호출 후, 이미지 링크를 받아오기 때문인데요.

 

 

 

이 API를 사전에 호출하면 LCP를 개선해볼 수 있을 것 같습니다.

이 프로젝트는 React-Query를 사용하고 있고, 마침 이 라이브러리는 prefetchQuery라는 기능을 가지고 있습니다.

 

또한 Next.js는 페이지 렌더링 이전에 데이터를 가져올 수 있는 함수를 제공합니다.

배너 이미지는 자주 변경될 수 있을 가능성이 있으므로 페이지 요청할 때마다 데이터를 미리 가져와야 겠습니다. (getServerSideProps 함수 사용할 예정)

 

 

 

 

 

export const getServerSideProps: GetServerSideProps = async (context) => {
	const queryClient = new QueryClient();

    try {
        await queryClient.prefetchQuery([QUERIES.GET_CATALOGS], () =>
            getCatalogs({
            	size: 100,
        	}).then(({ data }) => data.content),
    	);

        return {
            props: {
                dehydratedState: dehydrate(queryClient),
            },
        };
    } catch (e) {
        return {
        	props: {},
        };
    } finally {
    	queryClient.clear();
    }
};

페이지 레벨에서 해당 Query를 미리 호출(prefetch)하고, 배너를 사용하는 쪽에서 캐시된 Query를 사용하면 됩니다.

 

 

 

 

 

 

 

 

 

 

모바일 기준으로 61 -> 77점으로 대폭 상승했습니다.

 

FCP 0.8s -> 0.9s  (+0.1s)

LCP 6.2s  -> 3.8s  (-2.4s 만큼 개선)

TBT 40ms -> 40ms  (동일)

CLS 0.247 -> 0.087  (-0.16만큼 개선)

Speed Index 5.2s -> 21.4s  (+16.2 만큼 악화)

 

 

 

 

 

Lighthouse 검사를 할 때, 점수가 들쭉날쭉하는 경우가 있는데, Next 서버와 API 서버의 거리 (네트워크 상으로)가 멀어서 그런 것 같습니다.  Speed Index가 악화된 원인은 Next 서버에서 데이터를 가져와서 렌더링하기까지, 클라이언트에 HTML을 전달하지 않은 것으로 보입니다.