Pre-rendering
직역해도 그 의미를 유추할 수 있는데, 사전에 랜더링한다는 의미다.
무엇을 사전에 랜더링 한다는 말인가?
->
작업을 하고 npm run build 등으로 빌드할것이다.
그러면 src/pages 내부에 있는 페이지들이 생성된다.
사용자의 요청에 따라서 생성하는 것이 아니라,
클라이언트 사이드의 페이지 요청 전에 미리 생성함으로
*사전 렌더링(Pre-rendering) 이라고 한다.
이렇게 미리 만들어진 페이지들을 전달하게 될 것이다.
Next.js는 기본적으로 가능하다면 각 요청에 재사용될 수 있는 정적 페이지 생성(Pre-rendering)을 권장하고 있다.
따라서, Pre-rendering이 가능하다면, Pre-rendering을 사용한다.
항상 실시간으로 최신화 되어야 하는 페이지의 경우는 Pre-rendering이 적절하지 않으므로
SSR(Server-side Rendering)을 사용한다. 이는 다음에 다루도록 하겠다.
그게 무슨의미가 있나?
->
1. SPA특유의 긴 화이트 화면의 대기시간이 줄어든다.
레이아웃이 잡혀있는 상태의 html파일을 미리 만들어두었다가 전달하기 때문이다.(이는 css가 내장되어 전달됨을 의미한다)
이는 분명히 오랜 기다림의 하얀화면 혹은 삐걱거리듯 완성되는 화면과 차이가 있다.
이로써 클라이언트 사이드에서는 아래와 같은 변화가 있다.
기존 SPA : 스크립트를 로드, html css를 정의하고 화면에 그림 (상대적으로 느림)
Next 정적 페이지 생성 : Html Css가 이미 정의되어있음. 화면에 그림. (상대적으로 빠름)
SPA의 번들 사이즈를 처음에 감당할 것이냐,
필요한 만큼의 요청으로 필요한 만큼만 받아낼 것이냐의 부분도 있겠다.
(이부분은 spa쪽에서도 최적화나 다른 방법이 있는지는 모르겠다. 추후 확인 후 내용보강.)
SPA에 대한 이해도가 없는 사람들을 위해 간략하게 요약하자면,
사전 렌더링 : 그려진 페이지 (html css 내용이 있는 페이지)
사전 렌더링이 아닌 SPA : 그려지지 않은 페이지( html css 내용 받아와서 그려야함)
2. Seo대응 문제
spa의 경우 아직 일부 검색엔진 seo에서 불리한점이 있다. (자바스크립트 로드 문제)
Next.js의 경우 사전 렌더링으로 정적 html페이지를 제공하기 때문에 각 페이지 별 Head태그 내에 Meta태그 삽입,
웹표준에 따른 html구조 작성으로 seo를 최적화가 가능하다.
다시 요약해보자면 head태그를 페이지별로 설정할 수 있다. (글로벌 head를 오버라이딩 하게 됨)
따라서 그 내부에 meta태그를 사용한 설정들을 정의할 수 있다.
각 페이지의 html은 검색엔진의 봇 대부분이 해석가능한 형태다. (적어도 spa보다 더 보편적이므로)
이는 seo최적화가 용이하고 유리할 수 있음을 의미한다.
seo가 잘 되어야..서비스의 검색 노출이 더 잘될테고, 이는 매출의 기회가 늘어난다고 봐야한다.
결과적으로는 UX(사용자 경험)을 위한 맥락으로 이어진다.
댓글