TIL | NEXTjs Pre-rendering

Pre-rendering NEXT-js를 사용하게 되면 기본적으로 모든 페이지마다 Pre-rendering을 하게 된다. CRA를 통해 구현한 SPA의 Client-side Rendering과 다르게 렌더링의 주체가 client가 아닌 server이며, 이는 성능 개선 및 보다 향샹된 SEO를 제공한다. (비교 글은 여기 작성해놓았다.) Pre-rendering은 정적 요소가 먼저 그려진 후 사용자에게 보여지며, JS 로딩 후 정적 문서를 데이터 변경 및 사용자에게 반응할 수 있는 동적 형태로 변환하는 과정이 이루어진다. (이를 hydration이라고 한다.) NEXT는 두 가지 형태의 Pre-rendering가 존재하는데, 이는 다음과 같다. Static Generation DOM 요소들이 build가..