CSR vs SSR(feat.SPA vs MPA)

CSR → 클라이언트 사이드 렌더링

• 클라이언트 측 렌더링 페이지 요청이 브라우저에서 이루어짐
• 웹 사이트를 구성할 HTML , js 파일을 서버로부터 전송 받음
• 이후 js 통해 HTML 콘텐츠를 생성하는 렌더링 모드
• 매 페이지마다 HTML 페이지를 렌더링 하기 위해 서버 응답을 받지 않아도 된다
• 서버에 요청하는 부담을 덜어 클라이언트 측의 프로레스를 보다 빠르게 만들어 준다

장점

• 서버로부터 요청/응답 과정 없이 웹 브라우저 에서 렌더링 하는 방법이라 페이지 렌더링 시 마다 요청/응답ㅇ 을 받을 필요가 없어 서버 측 렌더링 보다 훨씬 빠르다 → 사용자 경험 (ux) 가 크게 향상’

단점

• js 를 기반으로 클라이언트 측에서 렌더링하기 때문에 검색 엔진이 이를 인식하지 못할경우 , 웹 사이트가 검색에 잘 노출되지 않는다
• 앱 모듈 최적화가 안된 경우, 첫 페이지 방문 시 늦게 표시 될 수 있다 (모듈 번들링 최적화가 필요)

SSR → 서버 사이드 렌더링

• CSR 렌더링 보다 오래되고 무거운 것으로 간주
• 사용자가 웹 사이트에서 서버에 요청하면 요청 정보가 서버에 전송
• 서버는 요청에 응답하는 HTML 코드가 포함된 파일을 생성해 전송

장점

• 검색엔진에 최적화 (훨 씬 더 많은 트래픽을 유도, 검색 순위 노출 상승)
• 보다 빠른 인덱싱 → 알고리즘이 콘텐츠를 감지하고 더 짧은 시간에 순위를 매긴다는 것을 의미
• 첫 페이지 로딩은 서버에서 생성된 HTML 코드를 포함한 파일이 전송되므로 CSR 보다 빠름

단점

• 다른 페이지를 탐색하고 ux 는 CSR 보다 느리다
• 페이지 탐색 시 마다 서버에 요청, 서버에서 HTML 코드를 포함한 파일을 생성해 전송 받는다 (이는 모든 사용자 활동 정보를 서버에서 관리(축적) 해야 해 서버의 부담이 크다
• 서버 담당이 많아지면 높은 수요가 발생할 경우 더 많은 비용이 든다

MPA === SSR , SPA === CSR 맞는 표현일까?

👩‍🏫먼저 짧막하게 MPA ,SPA 에 대해서도 알고 넘어가보자

MPA(Multiple Page Application)

사용자가 페이지를 요청할 때 마다 , 웹 서버가 요청한 UI 와 필요한 데이터를 HTML 으로 파싱해서 보여주는 방식의 웹 어플리케이션이다. 사용자가 간단한 요청을 해도 (ex 클릭) 매번 전체 페이지를 렌더링한다

장점

• SEO(검색엔진 최적화)가 유리하다
• 완성된 형태의 HTML 파일을 서버에서 전달 받기 때문데 페이지 크롤링 하기 적합(매 페이지마다 다른 meta 태그 지정 가능)

단점

• 매번 새로히 불러오는 페이지에 화면이 깜빡하며 렌더링 되는 것이 보이는 이슈가 발생
• 개발의 복잡도가 증가

SPA(Single Page Application)

하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 웹 어플리케이션이다.
한번의 정적 리소스를 받은 후 그 이후에는 필요한 데이터만 부분적으로 바꾸어주는 형태

장점

• 사용자 경험이 매우 좋고 , 성능 우수
• 서버 없이도 개발 가능 , 디버깅 용이
• 로컬에 데이터를 효과적으로 캐시(Cache) 가능, 그렇기에 오프라인에서도 사용 가능

단점

• 모든 정적 리소스를 한 번에 다 받기 때문에 초기 렌더링은 느리다
• SEO 측면에서 좋지 않다

🙅‍♀️ MPA 가 주로 SSR 을 사용, SPA 가 주로 CSR 을 사용

📌 MPA/SPA 는 정적 페이지를 여러개 쓰느냐 한 개 쓰느냐의 개념이고 SSR/CSR 은 렌더링의 기준이 서버인지, 클라이언트 인지에 대한 개념이다 엄밀히 말하자면 MPA !== SSR , SPA !== CSR