1. 서버측 렌더링
- 서버에서 HTML을 생성하고, 클라이언트에게 오나성된 HTML 페이지를 전송하는 방식
- 클라이언트의 요청
- 서버의 처리
- 서버는 요청을 받고, 필요한 데이터를 데이터베이스나 다른 소스에서 가져옵니다.
- 서버에서 HTML 템플릿에 데이터를 삽입하여 완성된 HTML 페이지를 생성합니다.
- 예를 들어, 서버 측 템플릿 엔진(예: EJS, Pug, Handlebars)을 사용하여 데이터를 동적으로 삽입합니다.
- 응답 전송
- 서버는 생성된 HTML 페이지를 클라이언트에게 전송합니다.
- 클라이언트의 렌더링
- 브라우저는 받은 HTML 페이지를 렌더링하여 사용자가 볼 수 있는 페이지를 표시합니다.
- 장점
- 빠른 초기 로딩
- SEO(Search Engine Optimization) : 검색 엔진 크롤러가 서버에서 제공된 HTML을 쉽게 읽을 수 있어 검색 엔진 최적화에 유리
- 단점
- 서버 부하
- 동적 업데이트의 어려움 : 페이지가 새로 고침될 때만 업데이트
2. 클라이언트 측 렌더링
- 서버에서 데이터를 제공하고, 클라이언트(브라우저)에서 HTML을 생성하고 렌더링하는 방식
- 클라이언트의 요청
- 서버의 처리
- 서버는 초기 HTML 페이지와 함께 JavaScript 파일, CSS 파일, 그리고 필요한 데이터(API 등)를 클라이언트에게 전송
- 클라이언트의 처리
- 브라우저는 JavaScript 파일을 실행하여 클라이언트 측에서 HTML을 동적으로 생성합니다.
- JavaScript는 서버에서 받아온 데이터(API 요청 등)를 사용하여 HTML을 생성하고 DOM에 삽입합니다.
- 렌더링
- 장점
- 빠른 인터랙티브 업데이트
- 서버 부하 감소
- 단점
- 초기 로딩 시간
- SEO 문제
3. 혼합 접근 (SSR + CSR)
- 많은 현대 웹 애플리케이션은 서버 측 렌더링과 클라이언트 측 렌더링을 혼합하여 사용하는 접근 방식을 채택
- 예를 들어, Next.js와 Nuxt.js와 같은 프레임워크는 다음과 같은 방식으로 혼합 접근을 제공
- 특징
- 초기 로딩 : 서버 측 렌더링을 통해 초기 페이지 로딩을 빠르게 하고, SEO 문제를 해결
- 상호 작용 : 클라이언트 측 렌더링을 통해 페이지의 동적 업데이트 및 사용자 상호작용을 처리