부제 : 3D 렌더링 말고 웹 렌더링
중간이 이제 막 끝났기 때문에 Next.js에 관련된 새로운 소식이 있을까 하여 찾아본 결과…
Next.js 13이 아닌 Next.js 14나 15에서는 정적 렌더링과 동적 콘텐츠 렌더링을 결합한 부분 사전 렌더링을 도입하게 되었다고 합니다.
어떤 렌더링을 보완하고, 새로운 특징을 넣고하면서 종류가 많아지는데… 과연 그래서 렌더링은 정확히 무엇인가를 알아보고자 합니다.
웹에서 말하는 렌더링은 흔히 말하는 3D 렌더링을 뜻하는 것은 아니지만 비슷합니다. 우리가 짠 코드 CSS, JS 그리고 기반이 되는 HTML 문서를 사용자에게 띄워주는 것 자체를 이야기 합니다.
결국 사용자에게 웹 화면을 보여주는 과정이라고 생각하면 됩니다.
웹에서의 렌더링 종류는 크게 3가지가 있습니다.
이미 다들 알고 계시겠지만 SSR는 서버 사이드 렌더링, CSR은 클라이언트 사이드 렌더링, 그리고 정적 사이트 생성 이라는 SSG.
그리고 그에 더하여 Next.js가 도입하고 있는 부분 사전 렌더링, PPR까지 정리해봅시다.
지난 Next.js 에 관련된 글을 적으면서 이미 한 번 훑은 개념입니다. 그 이름에서 부터 알수 있듯이 Rendering이 server 측면에서 일어난다고 할 수 있습니다.
Server에서 모든 작성 문서를 통합하여 하나의 HTML 파일을 생성해 브라우저, 즉 client에게 보냅니다.
일련의 과정은 다음과 같습니다.