[Web] SPA(Single Page Application)

SPA의 개념에 대한 포스팅입니다.

---

✅ SPA 란 무엇인가요?

SPA는 Single Page Application의 약자로, 단일 페이지로 구성된 웹 애플리케이션을 말합니다.

서버로 부터 첫 페이지만 받아오고 이후에는 동적으로 페이지를 구성합니다. 데이터를 수정, 조회할 때 새로고침되지 않고 다른 페이지로 이동되지 않습니다.

✅ CSR과 SPA는 같은 것 인가요?

아닙니다.

SPA는 맨 처음 화면을 다 받아오고 이후에는 받아오지 않더라도 데이터의 수정, 조회가 가능하게 하기위해 CSR이라는 방식을 채택한 것입니다.

따라서 둘은 비교의 대상이 아닙니다.

SPA의 반대되는 의미로는 MPA (Multi Page Application)가 있습니다. MPA는 SPA 와 반대로 서버로부터 완전한 페이지를 받아오고 이후에 데이터를 수정, 조회할 때 다른 페이지로 이동하게 됩니다.

✅ SPA 에서 SEO 문제를 해결 할 수 있는 방법이 있나요?

동적 렌더링을 사용하면 SPA에서 SEO문제를 해결할 수 있습니다.

• 동적 렌더링이란 서버에 요청하는 자가 사람인지 크롤러인지 판단하여 사람에게는 HTML과 js 등을, 크롤러에게는 사전에렌더링된 HTML 버전의 페이지를 보여주는 방식입니다.

  react-helmet, prerender-spa-plugin, prerender.io, puppeteer, rendertron 등이 있습니다.