[FE] Next.js SSR 환경에서 흔히 겪는 에러 Server Error XXX is not defined. This error happened while generating the page.

📄 참고자료

Toss 환경 고민없이 개발하기

---

📌 SSR

Server Side Rendering 은 렌더링 일부를 서버에게 위임하는 방식

서버에서 HTML 을 생성하고 브라우저에게 보여준다

 

렌더링과정에 서버가 개입되면서 생소한 에러들을 경험할 수 있다. 그 중 하나를 소개해볼까 한다.

---

🤬 Server Error XXX is not defined.

function App() {
	// 쿼리 파라미터로 전달받은 유저의 이름을 얻어온다.
	const name = new URL(location.href).searchParams.get(name);	
	// 유저의 이름을 화면에 출력한다.
	return <div>{name}</div>
}

쿼리파라미터로 전달받은 유저의 이름을 화면에 출력하는 코드이다.

코드를 살펴보면 문제없이 동작할 것 같지만, SSR환경에서는 에러가 발생한다.

 

1. 브라우저 객체인 `location` 이 존재하지 않는다. (`location is not defined.`)

💡 location 은 브라우저 환경에서 제공되는 객체로, URL 관련 속성 및 메소드를 제공한다.

 

2. HTML 생성하는 도중 발생한 에러다 (`This error happened while generating the page.`)

 

브라우저가 아니면서, HTML 생성도중 발생한 에러라는 사실을 통해 서버에서 발생한 에러임을 추측할 수 있다.

 

서버는 클라이언트에서 제공한 컴포넌트를 기반으로 HTML을 생성한다.

이때 만약, 클라이언트 환경에만 존재하는 객체에 존재하는 코드가 있다면 어떻게 될까?

서버는 해당 코드의 작동방식을 이해할 수 없고 이로인해 에러가 발생한다 !

 

처음 작성한 코드로 다시 돌아가보면,

`location` 은 클라이언트 환경에만 존재하는 브라우저 객체이다.

그러므로, 서버에서는 해당 객체를 이해할 수 없기 때문에 에러가 난것이다.

 

따라서, 해당 에러를 해결하기 위해서는 서버환경에서 `location` 에 접근할 수 없도록 수정해야 한다.