[우테코] Level1 SPA

미션3 LMS 강의 자료2

📚SPA

SPA

Single Page Application(싱글 페이지 어플리케이션)

전통적인 웹 구조

전통적인 웹의 구조는 여러 페이지로 구성되어 있었다. 유저가 요청할 때마다 페이지가 새로 고침되며, 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 한다. HTML 파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했다.

전통적인 방식의 한계(SSR)

하지만 점차 웹에서 제공되는 정보가 정말 많아지면서 전통적인 방식은 속도적인 측면에서 문제가 있었다. 이를 해소하기 위해 캐싱과 압축을 하여 사용자 경험을 개선했다. 하지만 이는 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서 충분하지 않은 경우가 많았다.

또한 서버에서 복잡한 웹 어플리케이션을 렌더링하고 클라이언트에 전달해주는 방식은 그만큼 렌더링을 위한 서버 자원이 사용되는 것이고, 불필요한 트래픽을 사용해야 했다.

새로운 접근법(CSR)

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

📚SSR

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

장점

• SSR을 사용하면 모든 데이터가 매핑된 페이지를 클라이언트(브라우저)에게 빠르게 보여줄 있다.
• SEO를 쉽게 구성할 수 있다.

단점

• 매번 페이지를 요청할 때마다 새로 고침 되므로 사용자 UX에 좋지 않다.

📚CSR

최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고,
이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식

서버는 요청한 API에 대해 JSON data로 응답하고, html을 그리는 역할은 클라이언트 측에서 자바스크립트가 수행한다.

단점

• 자바스크립트를 실행하지 않는 일반 크롤러에선 페이지의 정보를 제대로 받아 가지 못한다.
• 검색엔진에서 페이지가 검색 결과에서 잘 나타나지 않을 수 있다.
• 자바스크립트가 실행될 때까지 페이지가 비어있기 때문에 자바스크립트 파일이 아직 캐싱되지 않은 사용자는 아주 짧은 시간동안 흰 페이지가 나타날 수 있다.
• 유저가 실제로 방문하지 않을 수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문에, 필요한 페이지보다 더 무거운 자바스크립트 파일을 읽어야 할 수 있다.