[4장][효중] 서버 사이드 렌더링 (2)

[khj0426]

퀴즈

let count = 0;

const IndexPage = () => {
  console.log("Logging from IndexPage Component", ++count);
  return (
    // ...
  )
}
export const getServerSideProps = async () => {
  console.log("Logging from getServerSideProps", ++count);
  return {
    // ...
  };
};

새로고침을 한다면 브라우저 콘솔과 서버 콘솔에는 어떤 값이 나올까요?

답

정답

브라우저 콘솔에서는 계속 1이라는 값이 출력됩니다. 새로고침을 할 때 마다 hydration 과정이 새로 진행되기 때문에(서버에서 JS를 새로 불러오기 때문에) 매번 모듈에 선언된 count 값이 초기화 됩니다. 반대로 Next는 모듈이 서버 자원으로 로드되기 때문에 서버가 실행되는 동안 모듈의 변수가 지속됩니다. 그래서 함수가 호출될 때 마다 count 변수에 담긴 값이 계속 유지되고 변경됩니다.

브라우저 콘솔 : 
Logging from IndexPage Component 1
Logging from IndexPage Component 1
Logging from IndexPage Component 1

서버 콘솔 : 
Logging from getServerSideProps 1
Logging from IndexPage Component 2
Logging from getServerSideProps 3
Logging from IndexPage Component 4
Logging from getServerSideProps 5
Logging from IndexPage Component 6

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[hyoribogo]

정답

Logging from getServerSideProps 0
Logging from IndexPage Component 1

어려워서 안함