SPA란? SSR vs CSR 차이점

🔗 SPA(Single Page Application)란?

 

 기존 어플리케이션은 화면 이동 시 화면에 필요한 HTML을 서버로부터 받아서 처음부터 다시 로딩하기 때문에 속도가 느리다. 반면 SPA는 최초 한 번 페이지 전체를 로딩한 후 이후부터는 일부 데이터만 변경하여 화면을 구성하기 때문에 속도가 빠르다. SPA 프레임워크로는 React, Vue, Angular 등이 있다.

 

 

📌 SSR(Server Side Rendering) vs CSR(Client Side Rendering)

 

 

출처 - 하단에 표시

 

 

▪ SSR

① 서버 - 브라우저에게 HTML 응답

② 브라우저 - 브라우저 렌더링 -> 페이지 보여짐

③ 브라우저 - JS 다운

④ 브라우저 - 리액트 실행

⑤ 페이지 상호작용 가능

 

▪ CSR

① 서버 - 브라우저에게 응답

② 브라우저 - JS 다운

③ 브라우저 - 리액트 실행

④ 브라우저 렌더링 -> 페이지 보여짐 & 페이지 상호작용 가능

 

SSR은 클라이언트가 서버로부터 HTML을 받아 화면을 그린다.
CSR은 클라이언트가 알아서 화면을 그린다.

전통적인 웹 브라우저가 SSR 방식을 사용하고,
SPA가 CSR 방식을 사용한 것이다.

---

🔎 참고 자료

• 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)
• IT 기술면접 예상 문제
• 프론트엔드 개발자 면접 질문
• 그림 출처

💡 같이 보면 좋을 Post

[HTTP] 브라우저 렌더링 과정

[JS] 비동기 프로그래밍이란? AJAX란?