SPA, CSR, SSR의 차이

SPA, CSR, SSR은 무엇인가?

• 각각은 렌더링 방식을 설명할 때 나타내는 용어들이다.
• 렌더링 방식은 어떻게 차이가 있는지, 페이지를 어떻게 불러오는지 확인해보자.

---

SPA, Single Page Application

• 최초 한번의 페이지를 받아오고, 이 후 새로운 페이지를 받아오지 않는 웹 애플리케이션.
• 데이터 변경이 일어날 때, 새로고침 되지 않고 다른 페이지로 넘어가지 않는다.

---

CSR, Client Side Rendering

• 최초 로드시, 비어있는 index.html 파일을 받아 빈 화면을 구성한다.
• 데이터는 여러 정적(static)파일을 불러온 후, 요청해서 받아온다.
• 초반에 뼈대만 받고, 브라우저에서 동적으로 DOM을 그린다.
• React.js의 렌더링 방식

단점: SEO에 취약하고, 초기 화면의 렌더링 속도가 느리다.
장점: 받아온 이후의 매 렌더링 속도는 빠르다.

---

SSR, Server Side Rendering

• 요청한 index.html 파일을 받아 초기 화면을 구성한다.
• 요청마다, 서버에 새로운 페이지에 대한 요청을 하는 방식이다.
• 데이터가 모두 삽입된 다 만들어진 DOM을 받아 렌더링한다.
• Next.js의 렌더링 방식

단점: 매 랜더링마다 서버를 거쳐 속도가 느리다.
장점: 초기 화면의 렌더링 속도가 빠르고, SEO에 최적화.

---

[추가] SEO, Search Engine Optimization

• 렌더링 방식에 취급하는 SEO는 직역하면, 검색 엔진 최적화이다.
• 검색 엔진에서 상위에 노출될 수 있도록 최적화 하는 과정이라고 설명한다.
• 기본적으로 특정 검색어에 대한, 웹에서의 주요한 정보로 인식하도록 하는 과정을 중점에 맞추도록 한다.

---

✨ 출처

blog, 프론트엔드 면접 문제 은행

---