[Next JS] Anchoring issue :: SWR / react-query 사용 시 주의할 점

 

오늘은 Next JS에서 Client Data fetching 사용 시 마주할 수 있는 Anchoring 이슈에 대해 정리하려 합니다. Next JS docs에서 권장하고 있는 코드 스타일을 적용했을 때 생길 수 있는 이슈이기 때문에, 관련 이슈가 생겼을 때 저는 디버깅에 시간을 꽤나 썼습니다. 먼저 Next JS의 Data fetching에 대한 지식이 전무할 분들을 위해 개념부터 정리하고 이슈에 대한 해결 과정을 차례로 적어보겠습니다.

 

Data fetching

Next JS를 이용한 Data fetching에는 다음과 같은 방법을 사용할 수 있습니다. 자세한 내용은 공식 문서를 참조해주세요!

• getStaticProps / getServerSideProps : Server Side에서 미리 page html을 만들어 둡니다.
• Client Side : Client Side에서 data를 fetching 합니다.

Next JS의 공식 문서에서는 getStaticProps에서 pre-render가 필요한 컴포넌트의 data를 fetching하고 Client Side에서는 pre-render가 필요없거나 user의 interaction에 따라 변경되는 data를 fetching합니다.

 

Client Side의 data fetching은 물론 axios, fetch 등의 web api를 바로 사용해도 되지만, react-query나 SWR과 같이 캐싱과 함께 효과적으로 fetching해주는 라이브러리를 사용하기도 합니다. Next JS의 공식문서에서도 SWR을 이용한 data fetching을 practice code로 쓰고 있습니다.

해당 라이브러리들은 공통적으로 다음과 같은 코드 흐름을 권장합니다. useData로부터 data를 받아오기 전까지는 기존 컴포넌트를 렌더링하지 않고 대신 loading과 같은 대체 컴포넌트를 렌더링합니다.

const { data: nowDate, isLoading, isError } = useData();

if (isLoading) return <div>loading...</div>;
if (isError) return <div>error</div>;

return (
	<div id='anchoring-target'>{nowDate.date}</div> // (1)
);

 

Issue

상황

앵커링이 페이지 첫 접근 시 동작하지 않았습니다. 다만, 접근 이후 url 뒤에 hash(#)를 붙이거나 코드 상의 router.push 통해 이동하면 제대로 동작했습니다.

 

이슈 정리

위의 코드와 같이 코드를 구성할 경우 useData를 통한 data를 fetching해오기 전까지는 코드 (1)번의 div가 노출 되지 않습니다.

SSR을 사용하는 Next js 어플리케이션에서 위의 코드흐름은 다음과 같습니다.

1. Server Side에서 data fetching이 필요없는 부분을 pre-render 하기 → 이 때, data가 없으므로 loading이 표시됩니다.
2. Client Side에서 useData가 작동하여 data를 받아옵니다.
3. 받아온 데이터로 (1)번의 div가 렌더링됩니다.

만약 최초 접근하는 url에 hash(#anchoring-target)이 붙어 곧바로 해당 위치로 이동해야 했다면 위의 코드는 앵커링이 동작하지 않습니다.

앵커링 동작 자체는 Server Side에서 생성된 page에서 동작 완료 했다고 취급되기 때문입니다. 다만 Server Side에서는 useData가 동작하기 전이므로 Loading만이 표시되고 앵커링은 제대로 동작하지 않습니다.

 

해결

해당 이슈는 두 가지 방법으로 해결할 수 있습니다.

1. Server Side에서 fetching한 data로 default로 컴포넌트 구성 후, Client Side에서 fetching한 데이터로 갱신하기 (default data를 그냥 미리 지정해두는 것도 한 방법입니다.)
2. data가 없는 상태의 렌더링을 틀이 유지되도록 하기 (상단 코드에서 div는 노출되도록) 

const { data: nowDate } = useData();

return (
	<div id='anchoring-target'>{nowDate?.date}</div> // ? 연산자로 data가 없으면 표시하지 않기
);

 

근본적인 해결

문제는 이렇게 발생한 앵커링 문제를 Client data fetching이 원인이라고 찾아내기 어렵다는 것입니다.

따라서 앞으로 디버깅 시에는 SSR을 이용함에 따라 발생하는 이슈인 지 확인하기 위해 Server Side에서 생성되는 페이지를 보고 어떤 컴포넌트들이 미리 생성되어 있는 지를 파악하는 것이 중요합니다.

또한, 애초에 이러한 문제의 발생을 막기 위해 코드 스타일을 고정할 필요가 있는데 제가 제안하는 방식은 다음과 같습니다.

• user와의 interaction이 없는 컴포넌트는 Server Side에서 data fetching해오기
• Client side에서 data fetching을 해야 한다면 프레임을 유지할 수 있도록 Server Side에서 적용될 default data를 할당해주기