pre-rendering

이 글에서는 Next.js에서 중요한 개념인 Pre-Rendering에 대해서 알아보고자 합니다. Rendering 과정 먼저, 사전 렌더링(pre-rendering)을 하지 않았을 때, 브라우저가 어떻게 화면을 렌더링 하는지에 대해 대략적으로 설명을 하고 사전 렌더링과의 차이점에 대해 정리해보고자 합니다. 만약, CSR방식에 대해 이미 익숙하다면 아래 CSR파트는 생략하셔도 무관합니다. [ CSR ] [[ 1 - React의 기본 동작 방식 ]] 일반적인 react Application은 CSR(Client Side Rendering) 방식으로 화면을 렌더링 합니다. CSR 방식에 대해 간단히 설명하자면, 아래 그림과 같습니다. 쉽게 말해서, 1. 가장 먼저 뼈대만 있는 HTML 파일을 서버로 부터 다..

Next.js 에서는 자기들의 가장 중요한 컨셉중 하나로 Pre-rendering 을 꼽고 있다. 이 포스트에서는 Pre-rendering이 무엇인지, 그리고 Next.js에서 제공하는 렌더링 방식에 대해 정리해보고자 한다. React에서 작성한 코드를 UI의 HTML코드로 변환하는 중요한 작업단위를 Rendering이라고 한다. 이 글에서는 이러한 Rendering의 종류와 Next.js에서 제공하는 렌더링 방식에 대해 정리해보고자 한다. What is Rendering? 렌더링이란 무엇일까? 렌더링이란, 작성된 코드를 유저가 상호작용할 수 있는 페이지로 변화시키는 과정을 의미한다. 렌더링의 분류 Next.js를 통해서는 다음의 3가지 방식의 렌더링이 가능하다. Server-Side Rendering(..