[Next JS] CSR에서 SSR로 바꾸기

배우고 있는 중이니 잘못된 정보가 있을 경우 댓글로 알려주세요 :)

CSR로 구현한 찜찜했던 부분을 오늘 모두 SSR로 변경을 했다.

CSR로 구현했던 것

1. isLogin을 호출하는 부분 (Header - isLogin에 따라 헤더 정보 다르게 보여주기)

2. 내가 해당 포스트를 좋아요를 눌렀는지 확인하는 isLike를 호출하는 부분

위 부분들의 공통점은 user에 따라 다른 정보를 가져와야 한다는 것이다!

-> 각 사용자 cookie를 판별하고 그에 맞는 적절한 값을 가져온다!

SSR이 아니고 CSR로 구현했었던 이유

SSR로 구현하려고 했지만 서버 컴포넌트 내에서 위에서 설명했던 API를 호출할 경우 예상된 값을 가져오지 않았다

왜 예상된 값을 가져오지 않는 지 당시에는 잘 몰랐기에 단순히 CSR로 구현했다

async function first() {
    await getIsLiked('memos', memoId).then((data) => {
        setIsLike(data.isLike);
        setLikeNums(data.likes);
    });
}
useEffect(() => {
    first();
}, []);

클라이언트 컴포넌트 안에 다음과 같은 형식에 코드를 추가했다..!

뭔가 모양새도 그렇고 맘에 들지는 않았지만 당시에는 이렇게 코드를 구현해 놓았다

내가 느낀 CSR로 구현했을 때의 문제

직관적으로 느낀 것은 부자연스러운 깜박임 동작이었다

왜 그런지 생각해보았는데 내가 생각한 바로는 SSR로 렌더링되는 시점과 CSR로 렌더링되는 시점이 다르기 때문에 부자연스러운 깜박임이 생긴다는 것이었다

서버에서 미리 렌더링해서 SSR로 보여지는 시간부터 useEffect()로 해당함수로 호출하는 시간 사이의 간극이 깜박임을 만들어 낸다

CSR에서 SSR로 바꾸기

최근에 서버 컴포넌트 내에서 API를 호출하면 알맞은 값을 갖고오지 이유를 알아냈다

-> Next서버에서 Spring서버로 API요청을 할 때 쿠키를 자동으로 담아주지 않았기 때문이다

그래서 서버컴포넌트에서 쿠키를 갖고와서 직접 담아 spring 서버에 요청하니 잘 작동했다.

오늘 CSR에서 SSR로 변경하는 작업을 진행했고 그 결과 부자연스러운 깜박임 동작이 사라진 것을 확인할 수 있었다...!