SSR과 CSR
March 26, 2023
현업에서 일을 하다보니 렌더링에 대한 CS지식이 확립이 되어야한다는 필요성을 느꼈다. 사실 SSR과 CSR은 면접단골 질문이라 수없이 많이 공부하고 내용을 정리한 적도 있는 주제이다. 이번 기회에 관련된 개념을 깔끔하게 재정립 해보자.
MPA와 SPA
- MPA와 SPA는 아키텍처 패턴이다.
MPA(Multi Page Application)
MPA는 Multi-Page Application의 약자로, 말 그대로 여러 페이지로 이루어진 애플리케이션이다. 사용자가 새로운 페이지를 요청할 때마다 서버에서 해당 페이지를 다시 불러와 전체 페이지를 새로 고친다. 이러한 방식은 전통적인 웹 사이트의 아키텍처와 유사하다. MPA의 장점은 페이지 이동에 대한 즉각적인 렌더링이 가능하며, SEO 최적화가 상대적으로 쉽다.
SPA(Single Page Application)
SPA는 Single-Page Application의 약자로, 페이지가 하나뿐인 애플리케이션이다. 사용자가 애플리케이션에 접근할 때, 서버는 초기 페이지와 필요한 리소스를 제공하고, 이후에는 모든 데이터 교환이 클라이언트 측에서 이루어진다. 이를 통해 애플리케이션의 성능과 속도를 향상시킬 수 있다. SPA의 장점은 빠른 속도와 유연한 UI, 그리고 더 나은 사용자 경험을 제공할 수 있다.
- 현재 웹개발의 트렌드는 SPA이다.
- React.js, Vue.js 등이 이에 해당한다.
SSR과 CSR
- 렌더링 방식이란 결국 화면에 그려지는 것은 HTML이지만 이것을 누가 하느냐 주최에 따라서 CSR과 SSR로 나누어진다.
- 전통적인 방식으로 웹을 개발하던 분들은 이해가 잘 안될 수 있다.
- CSR, SSR의 개념 자체는 오래되었지만 본격적으로 대두대기 시작한 것은 JavaScript를 기반으로한 웹 프레임워크들이 대세가 되면서 부터이다.
SSR(Server Side Rendering)
서버 측 렌더링(SSR)은 서버에서 페이지의 초기 HTML과 CSS를 렌더링하는 방식이다. 서버에서 페이지를 완전히 렌더링하고, 클라이언트에서는 추가적인 JavaScript 요청을 통해 동적인 데이터를 가져오는 방식이다. 이러한 방식은 초기 로딩 속도가 빠르며, 검색 엔진 최적화(SEO)에 유리하다. 그러나, 초기 로딩 속도는 빠르지만, 서버의 처리량이 많아질 수 있고, 페이지가 전환될 때마다 새로고침이 발생하여 사용자 경험에 불편함을 유발할 수 있다.
- 첫 렌더링 시 완성된 HTML을 서버로 부터 받음
CSR(Client Side Rendering)
클라이언트 측 렌더링(CSR)은 초기 HTML과 CSS를 클라이언트에서 받아와서 렌더링하고, JavaScript를 통해 동적인 데이터를 가져오는 방식이다. 이러한 방식은 초기 로딩 속도가 느리지만, 페이지의 전환 및 상호작용이 매우 빠르며, 사용자 경험이 좋다. 그러나, 검색 엔진 최적화(SEO)에는 취약하며, 초기 로딩 속도가 느린 것은 사용자 경험에 불편함을 유발할 수 있다.
- 첫 렌더링 시 데이터가 없는 빈 HTML을 받음
// JavaScript 기반 웹 프레임워크들의 시작 index.html
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>그렇다면 SPA === CSR && MPA === SSR 일까?
“아니다. ”
- SPA와 MPA는 페이지를 한나만 쓰는지, 여러개 쓰는지 차이이다.
- CSR와 SSR은 렌더링을 어디에서 하냐의 차이이다.
- SPA에서는 첫 페이지만 받아오고 이후에는 데이터 수정, 조회를 하고 싶어서 CSR이란 방식을 채택한 것이다.
- 반대로 MPA는 동적이지 않은 페이지를 상황에 맞게 뿌려주기 떄문에 SSR을 채택한 것이다.
어떻게 구분해서 사용해야할까?
- SSR과 CSR의 장점과 단점을 명확하게 구분하고 사이트의 용도에 따라서 적절한 렌더링 방식을 차용해야한다.
- 처음에는 SSR을 수행하고 그 이후 다른 페이지에서는 CSR을 수행하는 Next.js도 있다.
