SPA

README.md

Single Page Application

SPA에 대해 다루기 전 먼저 CSR과 SSR에 대해 알아보자

• Client side rendering vs Server side rendering

  이슈\렌더링 방식	CSR	SSR (~= 전통적인 웹 방식)
  초기 view 로딩 속도	느림	빠름
  *SEO	상대적으로 불리	상대적으로 유리
  performance	서버 트래픽 감소, (필요한) 부분적 로딩	서버 트래픽 증가, 중복 로딩
  UX	부분적 로딩으로 화면 깜빡임이 없음	페이지 이동 시 화면 깜빡임

  SEO(Search Engine Optimization): 검색 엔진 최적화

  

• SPA(Single Page Application) architecture

  

  SPA는 CSR 방식을 사용한다. 이에 전반적인 성능 향상과 사용자 경험 향상을 기대할 수 있지만, 초기 view 로딩 속도, SEO, 보안 문제 등 해결해야 할 문제가 있다.

  어떻게?

  우선 검색 엔진 최적화의 경우 큰 이슈가 되지 않는다. 연관 키워드, 백링크 등 검색 엔진에 영향을 주는 다른 요소가 많다. 또한, SEO를 해결하기 위한 상용화된 해결 방법이 (ex. prerender) 존재한다.

  규모가 큰 웹 페이지의 로딩 속도가 지연되는 문제점은 번들 파일을 여러 파일로 쪼개는 code splitting을 통해 해결할 수 있다.

  보안 이슈의 경우, client 내 핵심 로직을 최소화하고 server와 client 양쪽 모두 유효성 검사를 진행하는 방법 밖에 없다.

---

참고

• SSR과 CSR의 차이를 알아보자
• 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)
• 아하 프론트 개발기(1) — SPA와 SSR의 장단점 그리고 Nuxt.js