처음 만난 Next.js 문서
1.2
CSR vs SSR
지금부터는 다양한 렌더링 방식에 대해서 살펴보도록 하겠습니다.
1.2.1 CSR (Client Side Rendering)
먼저 CSR은 Client Side Rendering의 약자로써, 렌더링이 클라이언트에서 이뤄지는 것을 의미합니다. 여기서의 클라이언트는 웹브라우저를 의미합니다. 즉, 웹페이지의 렌더링이 사용자의 웹브라우저에서 이뤄지는 것을 CSR이라고 하는 것이죠. CSR은 가장 전통적이고 일반적인 렌더링 방식입니다.
아래 그림은 CSR의 작동 과정을 나타낸 것입니다.
먼저 사용자가 브라우저에 페이지 요청을 보내면, 브라우저는 서버에 HTML, CSS, 그리고 JavaScript 파일을 요청합니다. 그러면 서버에서는 요청에 대한 응답으로 기본 구조의 HTML과 CSS, JavaScript 파일을 전달해줍니다. 이후 브라우저에서는 전달받은 JavaScript 코드를 해석하고 실행합니다. 만약 코드 상에 서버로 API 요청을 보내는 코드가 있다면, 브라우저는 서버로 API 요청을 전송하고 JSON 형태의 응답을 받아서 DOM을 업데이트하고 렌더링을 완료하게 됩니다. 이러한 일련의 과정이 일반적인 Client Side Rendering과정이라고 이해하면 됩니다.
1.2.2 SSR (Server Side Rendering)
그렇다면 SSR은 뭘까요? SSR은 Server Side Rendering의 약자로써, 렌더링이 서버에서 이뤄지는 것을 의미합니다. 즉, 서버에서 렌더링을 한 결과물을 클라이언트에 보내주는 것이죠.
아래 그림은 SSR의 작동 과정을 나타낸 것입니다.
먼저 사용자가 브라우저에 페이지 요청을 보내면, 브라우저는 서버에 HTML을 요청합니다. 그러면 서버에서는 페이지에 필요한 데이터를 데이터베이스에 요청해서 가져오고, 데이터를 이용해서 완전한 HTML을 생성합니다. 이후 서버에서 완성된 HTML을 다시 브라우저로 전달하고, 브라우저는 HTML을 렌더링하여 페이지를 표시하게 됩니다. 이처럼 서버에서 렌더링을 하여 완전한 HTML을 보내주는 일련의 과정이 일반적인 Server Side Rendering과정이라고 이해하면 됩니다.
마지막 업데이트: 2025년 10월 24일 01시 46분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.