[Next.js] 서버, 클라이언트 통신 구분

간혹, SSR을 사용해서 데이터를 가져올 때는 잘 가져와 졌는데 이 로직을 클라이언트에서 호출하면 CORS에러가 발생하는 상황이 발생한다.
따라서 해당 로직이 서버에서 실행될 때와 클라이언트에서 실행될 때를 구분해야 되는데 어떻게 구분하였냐면

Next.js의 typeof window를 활용

하는 것이다.

Next.js에서는 typeof window를 사용하여 현재 코드가 서버 측에서 실행되는지 클라이언트 측에서 실행되는지 확인할 수 있는데

if (typeof window !== 'undefined') {
  // 클라이언트 측에서 실행되는 코드
} else {
  // 서버 측에서 실행되는 코드
}

이렇게 window 객체는 브라우저 환경에서만 존재하므로 if문으로 분기처리를 해서 구분할 수 있게 되는 것이다!