2025/06/17 2

CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)

🌐 렌더링(Rendering)이란?정의: 사용자에게 웹페이지를 화면에 시각적으로 보여주는 과정비유: 머릿속 그림을 종이에 그리는 행위 → 실제로 HTML을 생성하고 화면에 출력하는 것✅ 기본 개념부터!용어약자의미CSRClient Side Rendering브라우저(클라이언트)가 페이지를 렌더링SSRServer Side Rendering서버가 HTML을 렌더링해서 클라이언트에 전달 🖥️ 클라이언트 사이드 렌더링 (CSR: Client-Side Rendering) React, Vue 등 SPA의 기본 방식HTML 껍데기만 받고, 실제 화면은 JavaScript가 브라우저에서 만들어서 보여줌개념: 서버는 기본 HTML + JavaScript만 보내고, 브라우저가 JS로 직접 화면을 그림 처음 로딩 시 JS ..

SPA (Single Page Application)

✅ SPA란? (Single Page Application)**SPA는 ‘하나의 HTML 페이지에서 동적으로 콘텐츠를 바꾸는 방식의 웹 애플리케이션’**즉, 사용자가 페이지를 이동해도 전체 페이지를 새로 불러오지 않고, 필요한 부분만 JavaScript로 동적으로 교체 기본 원리최초 접속 시 index.html 하나만 불러옴이후 라우팅(페이지 이동)은 브라우저의 주소만 바꾸고,화면은 JavaScript(React, Vue 등)로 바꿔줌서버는 필요한 데이터만 JSON 등으로 전달함 (AJAX, fetch 등) 🆚 기존 방식 (MPA: Multi Page Application)📄 MPA (기존 HTML, JSP 등)사용자가 어떤 페이지로 이동할 때마다 서버에 요청서버가 HTML을 새로 만들어서 전체 페이..