공부를 하면서 개인적으로 궁금했던 부분을 해결하거나, 스터디를 통해 배운 내용을 정리합니다.

SPA 이전의 렌더링 방식

• LAMP 스택 (Linux, Apache, MySQL, PHP/Python) : 모든 페이지 빌드를 서버에서 렌더링해 초기 페이지 진입이 빠름

  ⇒ 라우팅이 느리다는 단점

  ← 라우팅 발생 시에도 서버에 의존해야 하기 때문에
  

• 제한적인 자바스크립트의 역할

  ⇒ 서버 의존적

  ⇒ 애플리케이션 확장 시, 서버를 확장하는 것에 번거로움을 느낌
  

새로운 렌더링 방식의 필요성

• 자바스크립트 역할과 규모가 커짐 (페이지 렌더링 ~ 사용자 인터렉션)

SPA(Single Page Application)

• 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식

• 최초에 서버에서 최소한의 데이터를 불러온 이후로부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 작동이 이뤄짐

• JAM(JavaScript, API, Makup) 스택 등장

  ⇒ 자바스크립트와 마크업을 미리 빌드해두고 정적으로 사용자에게 제공, 이후 작업은 모두 클라이언트에서 실행

  ⇒ 서버 확장성 문제에서 자유로워짐
  

• 장점 : 훌륭한 사용자 경험 제공

  ← 한 번 로딩된 이후에는 서버를 거쳐 필요한 리소스를 받아올 일이 적어지기 때문
  

• 단점 : 최초에 로딩해야 할 자바스크립트 리소스가 커짐

새로운 렌더링 방식의 필요성

• 웹 환경이 개선됐음에도(사용자 기기, 인터넷 속도 등) 웹 애플리케이션의 로딩 속도는 개선되지 않음

SSR(Server Side Rendering)

• 최초에 사용자에게 보여줄 페이지를 서버에서 렌더링해 빠르게 사용자에게 화면을 제공하는 방식

• 장점

  • 최초 페이지 진입이 비교적 빠름

  • 검색 엔진과 SNS 공유 등 메타데이터 제공이 쉬움

  • 누적 레이아웃 이동이 적음 : 사용자가 예상치 못한 시점에서 페이지가 변경되어 불편을 초래하는 것

  • 사용자의 디바이스 성능에 비교적 자유로움

    ← 자바스크립트 리소스 실행은 디바이스에서만 실행되므로 절대적으로 디바이스 성능에 의존적임
    

  • 좀 더 안전한 보안

• 단점

  • 소스코드를 작성할 때 항상 서버를 고려해야 함

  • 적절한 서버가 구축돼 있어야 함

  • 서비스 지연에 따른 문제