SPA (Single Page Application)

이윤우·2022년 7월 27일
0

Vue

목록 보기
10/16
post-thumbnail

SPA

하나의 html 파일과 단일 JS 파일로 이루어져 있습니다. 최초 로딩 시에 html 파일과 JS를 미리 로딩하여 페이지 전환이 될 경우 페이지를 이동하는 것이 아닌 전환될 부분만 그려줍니다.
SPA로 페이지를 구성하게 되면 빠른 페이지변환과 반응성, 화면전환 애니메이션 등 사용자 친화적인 부분과 적은 트래픽 양을 누릴 수 있습니다.
하지만 장점만 있는 것은 아닙니다. 위에서 말씀드렸던 것 처럼 최초 로딩 시에 JS 파일을 가져와야 하는데 JS의 사이즈가 클수록 초기 로딩속도는 느려집니다.
또, 검색엔진이 해당 페이지를 크롤 했을 때는 페이지가 그려지기 전이기 때문에 텅 빈 div 태그만 노출됩니다. 이를 해결하기 위해서는 meta tag를 이용하거나 nuxt 같은 서버사이드 렌더링 프레임워크를 이용해야 합니다.

0개의 댓글