CSR과 SSR에 대한 설명

CSR과 SSR에 대한 설명

CSR (Client-Side Rendering)

• 클라이언트(브라우저)에서 JS를 사용해 HTML을 렌더링
• 클라이언트가 서버로부터 데이터를 받아 동적으로 페이지를 생성
• 단일 페이지 애플리케이션(SPA)에 주로 사용된다.

*SPA(Single Page Application) : 한 개의 HTML 페이지에서 동적으로 콘텐츠를 로드하며 페이지 전환

SSR (Server-Side Rendering)

• 서버에서 HTML을 완전히 렌터링한 후 클라이언트(브라우저)에 전달
• 클라이언트는 이미 완성된 HTML을 받아 바로 화면에 표시한다.
• 멀티 페이지 애플리케이션(MPA) 및 SEO 중심 웹사이트에 주로 사용된다.

*MPA(Multi Page Application) : 각 페이지마다 별도의 HTML 파일을 서버에서 받아오는 방식

*SEO(Search Engine Optimization) : 검색 엔진 최적화라고하며, 웹 사이트나 웹 페이ㅣ지를 검색 엔진에서 더 잘 찾아줄 수 있도록 가시성을 높이기 위해 최적화하는 작업

구분 CSR SSR

렌더링 위치	클라이언트(브라우저)	서버
초기 로딩 속도	느림	빠름
사용자 경험(UX)	빠른 페이지 전환	매번 서버 요청으로 페이지 전환 느림
사용 예시	Gmail, Trello (SPA)
(동적이고, 복잡한 UI, UX에 적합)	블로그, 뉴스 사이트 (SEO)
(초기 로딩 속도와 SEO가 중요한 곳에 적합)