웹 페이지 렌더링

웹 페이지를 렌더링 하는 방식에는 크게 두가지 방식이 있다

여러분이 어디선가 들어본 것 같은 서버 사이드 렌더링(Server-side rendering)과 클라이언트 사이드 렌더링(Client-side rendering) 모두 웹 페이지의 화면을 렌더링하는 방식이지만 그 방법과 특징에는 차이가 있다

그렇기에 이번 글에서는 이 둘의 개념과 차이점을 살펴보겠다

우선 서버 사이드 렌더링 약칭 SSR에 대해 알아보면

서버 사이드 렌더링(Server-side rendering)

서버 사이드 렌더링은 서버에서 HTML, CSS 및 JavaScript 코드를 실행하고 결과물을 클라이언트에게 전달하는 방식으로

클라이언트가 서버로 요청을 보내면 서버는 해당 요청에 필요한 데이터를 가져와 HTML을 렌더링한다 그 후 브라우저에 HTML 파일을 전송하고 브라우저는 이를 렌더링하여 화면에 표시하는 렌더링 방식이다

서버 사이드 렌더링의 장점은 검색 엔진 최적화(SEO)가 용이하다는 것이다 그 이유로는 검색 엔진은 HTML 코드를 읽어들여 검색 결과를 생성하기 때문에 서버에서 HTML 코드를 렌더링하면 검색 엔진이 페이지 내용을 이해하고 색인화할 수 있다

또한 초기 로딩 속도가 빠르며 JavaScript가 필요하지 않다 그러나 서버에 부하가 걸리고 화면 전환이 일어날 때마다 새로고침되어 사용자 경험 측면에서 좋지 않을 수 있다

다음으로는 클라이언트 사이드 렌더링 약칭 CSR에 대해 알아보자

클라이언트 사이드 렌더링은 HTML, CSS 및 JavaScript 코드를 모두 브라우저에서 실행하는 방식으로

브라우저는 페이지를 요청하면 서버는 데이터만 전송하고 브라우저는 이를 바탕으로 HTML을 렌더링한다 그 후 JavaScript를 사용하여 동적으로 데이터를 불러오고 브라우저는 이를 화면에 표시하는 방식이다

클라이언트 사이드 렌더링의 장점을 알아보면 우선 대표적인 장점이 사용자 경험이 좋다는 것이다 페이지 전환이 매끄럽고 부드럽게 동작하며 애플리케이션의 인터랙션도 빠르다 그러나 단점으로는 초기 로딩 속도가 느리고 검색 엔진 최적화(SEO)가 어렵다는 것이 단점이다

SSR은 전통적인 웹 애플리케이션에서 많이 사용되고 CSR은 최근에는 리액트와 같은 싱글 페이지 애플리케이션(SPA)에서 많이 사용된다

둘의 방식은 각각 장단점이 있기 때문에 프로젝트의 목적에 따라 예를 들어 컨텐츠 기반의 웹 사이트라면 서버 사이드 렌더링을 대화형 웹 애플리케이션이라면 클라이언트 사이드 렌더링을 선택하는 식으로

상황에 맞게 선택해야 한다