SPA 란 무엇일까요?

SPA 란 무엇일까요?

Single 단일 Page 페이지로 구성된 Application 어플리케이션을 뜻합니다.

화면 변환에 필요한 데이터를 서버사이드에서 HTML파일로 전달받지 않고 (서버사이드 렌더링 x)

필요한 데이터만 서버로부터 JSON 형태로 받아서 동적으로 렌더링하는 어플리케이션 입니다.

 

 

기존 어플리케이션과 SPA의 차이는 무엇인가요?

기존 방식은 화면변환 시에 화면이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩해왔습니다.

반면, SPA는 화면구성에 필요한 모든 HTML을 클라이언트가 가지고 있어서,

그냥 서버사이드에 데이터를 요청하고 JSON으로 받기 때문에 기존 방식보다 화면을 구성하는 속도가 빠릅니다.

 

장점은 무엇인가요?

화면 전체를 렌더링할 필요가 없기 때문에, 화면이동이 빠르다.

화면에 필요한 부분만 데이터를 받아서 렌더링하기 때문에 처리과정이 효율적이다. (비용기 적게 든다)

핵심가치는 사용자 경험(UX) 향상에 있다.

 

단점은 무엇인가요?

처음 화면을 로딩할 때, 모든 화면이 미리 준비되어 있어야 하기 때문에 로딩에 시간이 걸린다.

어플리케이션을 구현하는데 보다 시간이 걸리며 복잡하다.

SEO에 취약하다.

 

왜 SEO에 취약한가?

SSR은 서버사이드에서 정적인 페이지로 렌더링이 되어서, SEO에 사용되는 meta 태그들이 미리 정의되어 있어서 SEO에 유리하지만,

CSR은 SSR과 다르게 하나의 HTML파일로 모든 페이지를 구성하기 때문에, meta 태그 정의에 약점이 있다. (react-helmet 같은 라이브러리로 보완할 수 있긴하다.)