Next.js 렌더링 원리

Diffing / Hydration

브라우저가 페이지를 요청하면 Next.js 서버가 먼저 HTML을 그려 보내는데, 이것을 pre-rendering이라고 합니다. 그 뒤 브라우저에서 React가 이 HTML에 이벤트와 상태를 연결하는 과정을 hydration이라고 합니다. 이때 서버에서 렌더링한 결과와 브라우저에서 렌더링한 결과가 얼마나 다른지 비교하는 과정을 diffing이라고 합니다.

ReferenceError: localStorage is not defined pre-rendering은 서버에서 실행되기 때문에 localStorage, alert처럼 브라우저에만 있는 기능을 쓰면 이 에러가 납니다.