[FE] SPA/SSR/CSR이란?

IRE_0546·2021년 9월 5일
0
post-thumbnail

간단하게 개념에 대해서 정리해 보려고 한다. 중요한 개념은 기본이 되는 것이다. 잊지 않도록 정리를 차근해 해본다. 간단하게 말하자면 아래와 같다.

SPA

Single Page Application

말 그대로, 한 개의 페이지를 가진 어플리케이션을 말한다.
사용하는 이유는 사용자자 친화적이며, 초기 렌더링 후 데이터만 받아오기 때문에 서버 요청이 적다. 또한 Virtual DOM이다. 프론트엔드와 백엔드가 분리 되므로, 개발 업무 분업화 및 협업에 용이하며 개발이 상대적으로 효율적이라는 장점이 있다.

SSR

Server Side Rendering

서버에서 렌더링을 마치고, Data가 결합된 HTML파일을 내려주는 방식이다. 새로운 페이지로 이동될 때마다 서버에 요청하여 페이지를 받아야 하기 때문에 이 경우이는 받아오는 시간동안 깜빡이는 현상이 발생할 수 있다. 이것을 사용하는 이유로는 SEO를 들 수 있다.

- SEO (Search Engine Optimization)란?

검색 엔진 최적화이다. 검색 엔진 최적화는 검색자의 의도를 이해하고 이에 맞춰 웹 페이지의 콘텐츠를 제작하고, 이 페이지가 검색 결과 페이지에서 잘 노출되도록 웹 페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 시책이다. 이렇게 최적화를 하더라도, SSR 방식이 아니라면 또는 구조가 복잡하여 크롤러가 웹 페이지를 제대로 읽어가지 못하거나 하는 이유로 SEO 성과는 떨어지게 된다.

CSR

Client Side Rendering

SSR과는 다르게 최초 요청 시에 HTML을 비롯하여 CSS, JavaScript등의 웹에 필요한 리소스를 받아오고, 이후에는 서버에서 데이터만 요청하고 자바스크립트로 뷰를 컨트롤하는 방식이다. SSR보다 초기에는 많은 리소스를 요청하기 때문에 렌더링은 SSR 방식이 더 빠르지만, 이후 반응형이나 다른 페이지의 이동으로는 SSR보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공하기 때문에 이 방식을 이용한다.

profile
Front-end developer, Time is flying never to return ✨

0개의 댓글