swr을 쓰면 컴포넌트 랜더링 플로우가 어떻게 되나요?

2021-08-23T00:16:35.088Z

0

getServerSideProps를 export한 페이지에서는 useSWR훅도 ssr로 작동한다는 말씀인가요?

0

useSWR에 옵션으로 initialData를 주면 ssr로 작동합니다.

0

initialData를 주지 않고 url, fetcher만 인자로 넘겼는데도 콘솔이 한 번만 찍힌 이유는 무엇 때문이죠?

0

저도 모르겠네요 console을 어디다 찍으셨는데요?

0

profile 컴포넌트 안에서 찍었습니다.

const Profile = () => {
    const { data, error } = useSWR(url, fetcher);
    console.log('profile render: ', data, error);
   ...
  return <div>프로필</div>;
}

이런식으로요

0

fetcher 내부에 콘솔로그를 찍고, 만약에 그 콘솔로그가 프론트 브라우저 말고도 프론트 서버에 찍힌다면 fetcher도 서버에서 실행되어서 결과가 나타난 것입니다. 서버에 없다면 브라우저에서 렌더링된 것입니다.

0

넥스트가 기본적으로 ssr을 진행하면서 useSWR을 서버단에서 실행해줬단 말씀인가요?

0

넥스트가 ssr을 위해서 컴포넌트를 한 번 실행하니까 그 때 useSWR도 한 번 실행되긴 합니다.

0

왜 그런 건지 알아냈어요.

처음 profile 페이지로 이동하면 많이 찍히는데

그 이후에는 swr이 같은 url 에 대해서 캐싱을 해놓는 듯합니다.
근데 두 번 찍히긴 하네요. 어제 한 번 찍혔다는 건 제 착각인가 봐요.

const useSWR = (url, fetcher) => {
    const [data, setData] = useState();
    const [error, setError] = useState();

    useEffect(() => {
        fetcher(url).then(setData).catch(setError);
    }, [url]);

    return { data, error };
};

swr을 대충 이런 커스텀 훅으로 이해하면 될까요?

처음엔 empty data, empty error를 리턴하고 
이벤트 루프가 promise가 done된 테스크를 stack에 올릴 때
setData를 실행해서 data를 갱신한 다음 profile 컴포넌트를 리랜더링하고
다시 호출된 swr은 갱신된 data를 리턴하는 식으로요.
url이 달라질 때마다 새로 가져오구요.

0

네 맞습니다. 저기 useEffect에 추가적으로 주기적으로 재요청한다든가의 로직이 추가되는 개념입니다. 실제 구현은 다양한 옵션들로 인해 훨씬 복잡해졌지만요.

https://github.com/vercel/swr/blob/master/src/use-swr.ts