csr 2

[Web] SPA? MPA? CSR? SSR? SSG?

CSR과 SSR을 알아보기 전에 먼저 SPA와 MPA에 대해 알아보자.  1. SPA (Single Page Application)하나의 페이지로 구성된 웹 어플리케이션을 말하며, 원하는 부분만 클라이언트에서 동적으로 바꿀 수 있는 웹페이지 구성 방식이다.React, Angular, Vue 등의 프레임워크들이 SPA 방식이다.아래의 에어비엔비 사이트를 보면 메뉴를 클릭했을 때 아래의 해당되는 부분만 바뀌는 것을 확인할 수 있다.  2. MPA (MultiPageApplication)여러 개의 페이지로 구성된 웹 어플리케이션을 말하며, 전환할 때마다 새로운 HTML 파일을 받아와 페이지 전체를 새로 렌더링하는 웹페이지 구성 방식이다.매번 새로운 HTML을 서버로부터 받아온다는 단점 때문에 AJAX가 등장하..

Web 2025.03.22

[Frontend] Rendering? CSR vs SSR

Rendering Rendering이란 Javascript 코드를 브라우저가 이해할 수 있는 HTML로 바꾸는 것을 말한다. Client Side Rendering (CSR) Client Side Rendering 방식은 브라우저가 rendering 작업을 하는 방식인데 이는 사용자 브라우저인 client단에서 모든 rendering 작업을 수행하고 client가 사용자 브라우저에 UI를 구축한다는 말이다. 모든 rendering, 즉 모든 UI 구축 작업이 client 측에서 일어나며 client는 JavaScript를 로드하고 그 후에 JavaScript가 UI를 빌드한다. CSR 방식을 사용하는 대표적인 라이브러리는 React가 있다. 이 방식의 단점은 크게 두 가지가 있다. 1. 페이지 로딩 시간..

프론트엔드 2024.02.07