웹 개발의 세계에서는 다양한 렌더링 방식이 존재하며, 각 방식은 웹사이트의 성능과 사용자 경험에 지대한 영향을 미칩니다. 이 글에서는 클라이언트 사이드 렌더링 ( CSR ) 과 서버 사이드 렌더링 ( SSR ) 이라는 두 가지 주요 렌더링 방식에 대해 탐구해보려 합니다.
국비 지원 학원에서 백엔드 개발을 공부하는 동안, CSR 과 SSR 에 대한 논의는 드물었습니다. 하지만 ,JSP 를 사용하며 자연스럽게 SSR 방식을 경험하고 있었던 것 입니다. JSP는 클라이언트의 요청에 응답하여 서버에서 HTML을 동적으로 생성하고 전송하는 전통적인 SSR 방식의 한 예 입니다.
반면 React 와 같은 현대적인 프론트엔드 프레임워크를 접하며 CSR 에 대해 깊이 이해하게 되었습니다. React 는 브라우저에서 동적으로 콘텐츠를 렌더링하는 CSR 의 대표적인 예로, 빠른 인터랙션 과 부드러운 사용자 경험을 제공합니다.
이러한 배경을 바탕으로, CSR 과 SSR의 개념과 차이점을 명확히 하여 두 방식이 웹 개발에 어떻게 적용되는 지 , 그리고 각각의 장단점을 살펴볼 것 입니다. 또한, Next.js 를 접하면서 새롭게 알게 된 정적 사이트 생성 ( SSG ) 과 중분적 정적 재생성 ( ISR ) 에 대해서도 탐구하고자 합니다. Next.js 를 사용하면서 , 어떤 부분에서 어떠한 렌더링 방식을 선택해야 하는 지 고민을 하게 되면서, 렌더링 방식들에 대해 다시 고민해 볼 필요가 있다고 생각이 들어 이 글을 적게 되었습니다. 이 기술들에 대한 나의 이해와 경험을 기록함으로써, 웹 개발의 다양한 렌더링 방식에 대한 깊은 통찰을 공유하고, 독자 여러분들의 학습에 대해 도움이 되길 바랍니다.
서버 사이드 렌더링 방식 ( SSR ) 과 클라이언트 사이드 렌더링 방식 ( CSR )
앞에서도 이야기 했듯이, SSR의 대표적인 예로는 JSP를 들 수 있습니다. 서버 사이드 렌더링 방식을 이해 하기 위해서는 글자 그대로를 이해하려고 노력하면 이해하기가 편합니다. 서버 쪽에서 렌더링 하는 방식이라 생각하면 편합니다. 이를 더 자세히 말하자면, 서버에서 페이지 ( HTML ) 를 그려 클라이언트 ( 브라우저 ) 로 보낸 후 화면에 표시하는 기법을 이야기 합니다. 즉, 서버에서 사용자에게 보여 줄 페이지를 완성해서 보여주는 방식이다. 그렇다면 , 이와는 반대로 클라이언트 사이드 렌더링 ( CSR ) 은 클라이언트 쪽에서 렌더링 하는 방식이라 생각하면 편합니다. 그렇지만, 클라이언트 말이 우리나라 말로 해석하면 "고객" 이라는 뜻으로 생각할 수 있겠지만, 여기서는 클라이언트를 브라우저라고 생각하면 이해 하기가 편해집니다. 저도 처음에는 " 고객 " 이라는 뜻으로 해석하려다 보니 잘 이해가 되지 않았지만, 오히려 " 브라우저 사이드 렌더링 " 이라고 생각하니, 더 이해가 잘 되었습니다. 다시 자세히 말하자면, 서버에서 받은 데이터를 이용하여 클라이언트인 브라우저가 화면을 그리는 방식입니다.
서버 사이드 렌더링 방식과 클라이언트 사이드 렌더링 방식 각각의 특징에 따라 장.단점이 정해졌습니다. 우선 , 서버 사이드 렌더링 방식의 장점은 SEO ( 검색 엔진 ) 에 있어서 최적화가 되어있다는 장점이 존재하지만, 이는 서버에서 완전히 렌더링된 페이지를 클라이언트에 전송하기 때문에, 검색 엔진이 페이지 내용을 쉽게 파악하고 색인화할 수 있습니다. 또한, 서버 사이드 렌더링 방식은 첫 페이지 로딩 속도가 빠르고, 초기 렌더링에 한 페이지의 내용만 가져오므로, 클라이언트의 리소를 많이 사용하지 않는다는 장점이 있습니다. 그러나 , 이러한 방식은 사용자가 페이지를 이동할 때 마다, 서버에 요청을 해야하기 때문에, 서버에 부하가 많이 가고, 사용자와의 상호작용이 많은 웹 어플리케이션에서는 서버 응답 시간이 길어 질 수 있습니다. 이러한 단점을 해결하고자, 클라이언트 사이드 렌더링 이 생겨나게 되었고, 그러하여, 클라이언트 사이드 렌더링은 웹 페이지의 동적인 상호작용에 최적화 되어 있습니다. React 와 같은 현대적인 프론트엔드 프레임워크는 CSR 을 사용하여 브라우저 내에서 페이지의 일부분만을 동적으로 업데이트 할 수 있습니다. 이는 사용자 경험을 크게 향상시키며, 페이지 간의 부드러운 전환과 빠른 상호작용을 가능하게 합니다. 그러나 CSR은 초기 로딩 시 모든 자바스크립트를 로드해야 하며, SEO에 비효율적일 수 있습니다.
최근에는 Next.js와 같은 프레임워크를 통해 정적 사이트 생성 (SSG)과 중분적 정적 재생성 (ISR)과 같은 새로운 렌더링 방식이 등장하고 있습니다. SSG는 빌드 타임에 모든 페이지를 미리 생성하여 배포하는 방식으로, 빠른 로딩 속도와 SEO 친화적인 구조를 제공합니다. ISR은 SSG의 한 변형으로, 정적으로 생성된 페이지를 일정 시간 간격으로 자동으로 업데이트하여 항상 최신의 콘텐츠를 제공합니다.
이러한 다양한 렌더링 방식은 각각의 장단점을 가지고 있으며, 웹 애플리케이션의 요구사항과 목표에 따라 적절한 방식을 선택하는 것이 중요합니다. 웹 개발자로서 여러 렌더링 방식에 대한 이해와 경험을 바탕으로, 최적의 사용자 경험을 제공하는 웹사이트를 개발할 수 있을 것입니다.
웹 개발의 세계에서는 다양한 렌더링 방식이 존재하며, 각 방식은 웹사이트의 성능과 사용자 경험에 지대한 영향을 미칩니다. 이 글에서는 클라이언트 사이드 렌더링 ( CSR ) 과 서버 사이드 렌더링 ( SSR ) 이라는 두 가지 주요 렌더링 방식에 대해 탐구해보려 합니다.
국비 지원 학원에서 백엔드 개발을 공부하는 동안, CSR 과 SSR 에 대한 논의는 드물었습니다. 하지만 ,JSP 를 사용하며 자연스럽게 SSR 방식을 경험하고 있었던 것 입니다. JSP는 클라이언트의 요청에 응답하여 서버에서 HTML을 동적으로 생성하고 전송하는 전통적인 SSR 방식의 한 예 입니다.
반면 React 와 같은 현대적인 프론트엔드 프레임워크를 접하며 CSR 에 대해 깊이 이해하게 되었습니다. React 는 브라우저에서 동적으로 콘텐츠를 렌더링하는 CSR 의 대표적인 예로, 빠른 인터랙션 과 부드러운 사용자 경험을 제공합니다.
이러한 배경을 바탕으로, CSR 과 SSR의 개념과 차이점을 명확히 하여 두 방식이 웹 개발에 어떻게 적용되는 지 , 그리고 각각의 장단점을 살펴볼 것 입니다. 또한, Next.js 를 접하면서 새롭게 알게 된 정적 사이트 생성 ( SSG ) 과 중분적 정적 재생성 ( ISR ) 에 대해서도 탐구하고자 합니다. Next.js 를 사용하면서 , 어떤 부분에서 어떠한 렌더링 방식을 선택해야 하는 지 고민을 하게 되면서, 렌더링 방식들에 대해 다시 고민해 볼 필요가 있다고 생각이 들어 이 글을 적게 되었습니다. 이 기술들에 대한 나의 이해와 경험을 기록함으로써, 웹 개발의 다양한 렌더링 방식에 대한 깊은 통찰을 공유하고, 독자 여러분들의 학습에 대해 도움이 되길 바랍니다.
서버 사이드 렌더링 방식 ( SSR ) 과 클라이언트 사이드 렌더링 방식 ( CSR )
앞에서도 이야기 했듯이, SSR의 대표적인 예로는 JSP를 들 수 있습니다. 서버 사이드 렌더링 방식을 이해 하기 위해서는 글자 그대로를 이해하려고 노력하면 이해하기가 편합니다. 서버 쪽에서 렌더링 하는 방식이라 생각하면 편합니다. 이를 더 자세히 말하자면, 서버에서 페이지 ( HTML ) 를 그려 클라이언트 ( 브라우저 ) 로 보낸 후 화면에 표시하는 기법을 이야기 합니다. 즉, 서버에서 사용자에게 보여 줄 페이지를 완성해서 보여주는 방식이다. 그렇다면 , 이와는 반대로 클라이언트 사이드 렌더링 ( CSR ) 은 클라이언트 쪽에서 렌더링 하는 방식이라 생각하면 편합니다. 그렇지만, 클라이언트 말이 우리나라 말로 해석하면 "고객" 이라는 뜻으로 생각할 수 있겠지만, 여기서는 클라이언트를 브라우저라고 생각하면 이해 하기가 편해집니다. 저도 처음에는 " 고객 " 이라는 뜻으로 해석하려다 보니 잘 이해가 되지 않았지만, 오히려 " 브라우저 사이드 렌더링 " 이라고 생각하니, 더 이해가 잘 되었습니다. 다시 자세히 말하자면, 서버에서 받은 데이터를 이용하여 클라이언트인 브라우저가 화면을 그리는 방식입니다.
서버 사이드 렌더링 방식과 클라이언트 사이드 렌더링 방식 각각의 특징에 따라 장.단점이 정해졌습니다. 우선 , 서버 사이드 렌더링 방식의 장점은 SEO ( 검색 엔진 ) 에 있어서 최적화가 되어있다는 장점이 존재하지만, 이는 서버에서 완전히 렌더링된 페이지를 클라이언트에 전송하기 때문에, 검색 엔진이 페이지 내용을 쉽게 파악하고 색인화할 수 있습니다. 또한, 서버 사이드 렌더링 방식은 첫 페이지 로딩 속도가 빠르고, 초기 렌더링에 한 페이지의 내용만 가져오므로, 클라이언트의 리소를 많이 사용하지 않는다는 장점이 있습니다. 그러나 , 이러한 방식은 사용자가 페이지를 이동할 때 마다, 서버에 요청을 해야하기 때문에, 서버에 부하가 많이 가고, 사용자와의 상호작용이 많은 웹 어플리케이션에서는 서버 응답 시간이 길어 질 수 있습니다. 이러한 단점을 해결하고자, 클라이언트 사이드 렌더링 이 생겨나게 되었고, 그러하여, 클라이언트 사이드 렌더링은 웹 페이지의 동적인 상호작용에 최적화 되어 있습니다. React 와 같은 현대적인 프론트엔드 프레임워크는 CSR 을 사용하여 브라우저 내에서 페이지의 일부분만을 동적으로 업데이트 할 수 있습니다. 이는 사용자 경험을 크게 향상시키며, 페이지 간의 부드러운 전환과 빠른 상호작용을 가능하게 합니다. 그러나 CSR은 초기 로딩 시 모든 자바스크립트를 로드해야 하며, SEO에 비효율적일 수 있습니다.
최근에는 Next.js와 같은 프레임워크를 통해 정적 사이트 생성 (SSG)과 중분적 정적 재생성 (ISR)과 같은 새로운 렌더링 방식이 등장하고 있습니다. SSG는 빌드 타임에 모든 페이지를 미리 생성하여 배포하는 방식으로, 빠른 로딩 속도와 SEO 친화적인 구조를 제공합니다. ISR은 SSG의 한 변형으로, 정적으로 생성된 페이지를 일정 시간 간격으로 자동으로 업데이트하여 항상 최신의 콘텐츠를 제공합니다.
이러한 다양한 렌더링 방식은 각각의 장단점을 가지고 있으며, 웹 애플리케이션의 요구사항과 목표에 따라 적절한 방식을 선택하는 것이 중요합니다. 웹 개발자로서 여러 렌더링 방식에 대한 이해와 경험을 바탕으로, 최적의 사용자 경험을 제공하는 웹사이트를 개발할 수 있을 것입니다.
