🗼

SPA

SPA를 알아야 하는 이유

SPA가 등장한 이유가 궁금하다면

이 문서를 보고 나면

SSR과 CSR 렌더링 방식에 대해 이해할 수 있다.

SPA

SPA는 Single Page Application(싱글 페이지 어플리케이션)의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹의 구조는, 여러 페이지로 구성되어 있습니다. 유저가 요청할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. HTML 파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했죠.

하지만 점차 웹에서 제공되는 정보가 정말 많아지면서 전통적인 방식은 속도적인 측면에서 문제가 있었습니다. 이를 해소하기 위하여 캐싱과 압축을 하여 사용자 경험을 개선시키기도 했는데요. 하지만 이는 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서 충분하지 않은 경우가 많았습니다. 또한 서버에서 복잡한 웹 어플리케이션을 렌더링하고 클라이언트에 전달해주는 방식은 그 만큼 렌더링을 위한 서버 자원이 사용되는것이고, 불필요한 트래픽을 사용해야 했습니다.

그래서 React와같은 라이브러리 혹은 프레임워크들은 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 어플리케이션을 브라우저에 로드한 다음에 정말 필요한 데이터만 전달받아 보여주는 방식을 고민했습니다.

이러한 렌더링의 방식은 SSR과 CSR이라는 페이지 렌더링 방식에 대해 살펴보면서 이해할 수 있습니다.

SSR

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 보여주는 방식입니다. SSR을 사용하면 모든 데이터가 매핑된 페이지를 클라이언트(브라우저)에게 빠르게 보여줄 수 있습니다. 그리고 SEO(search engine optimization) 또한 쉽게 구성할 수 있습니다. 하지만 매번 페이지를 요청할 때마다 새로고침 되므로 사용자 UX에 좋지 않다는 단점이 있습니다.

CSR

반면 CSR은 최초에 1번 서버에서 전체 페이지를 로딩하여 보여줍니다. 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식입니다. SPA는 트래픽을 감소시키고 더 나은 사용자 경험을 제공했습니다. 서버는 요청한 API에 대해 JSON data로 응답하고, html을 그리는 역할은 클라이언트 측에서 자바스크립트가 수행합니다. 더 나은 문제 해결책으로 나온 CSR 방식도 단점은 있는데요. 우선 자바스크립트를 실행하지 않는 일반 크롤러에선 페이지의 정보를 제대로 받아가지 못한다는 점 입니다. 때문에, 구글, 네이버, 다음 등 검색엔진에서 페이지가 검색결과에서 잘 나타나지 않을수도 있습니다. 추가적으로, 자바스크립트가 실행될때까지 페이지가 비어있기 때문에, 자바스크립트 파일이 아직 캐싱되지 않은 사용자는 아주 짧은 시간동안 흰 페이지가 나타날 수 있습니다. 또한 유저가 실제로 방문하지 않을 수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문에, 필요한 페이지보다 더 무거운 자바스크립트 파일을 읽어야할 수 있습니다. 하지만 이러한 단점들을 해결할 수 있는 방법들도 존재합니다. 해당 부분에 해당하는 세세한 부분은 레벨2에서 집중적으로 다루게 될테니 이번 미션에서는 SPA에서 사용하는 CSR 방식과 전통적인 SSR방식에 대해서만 이해해주셔도 좋습니다!

정리

•

SSR방식은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.

•

SSR방식은 매번 페이지를 요청할 때마다 새로고침 되므로 인터렉셔닝 많은 서비스의 경우에는 적절하지 않다.

•

CSR방식은 서버로부터 전체 페이지를 구성하는 스크립트를 다운받고, 이후에는 필요한 데이터를 요청하는 API로 페이지를 구성한다.

•

CSR방식은 최초에 서버로부터 페이지를 구성하는 프레임만 받아오기 때문에 검색엔진 최적화를 위해서는 다른 전략이 필요하다.

참고 링크

•

MDN_App_structure

•

어서 와, SSR은 처음이지?