렌더링이란 최종 사용자가 브라우저를 통해 상호작용할 수 있는 페이지를 만드는 데 필요한 코드를 만드는 과정을 말합니다. 여기에는 콘텐츠 준비, 로직 및 처리 적용, 최종 페이지를 표시하는 데 필요한 UI 요소 및 기타 필수 구성요소가 포함됩니다. 콘텐츠 기반 애플리케이션은 빠른 로드 속도, 짧은 지연 시간, 빠른 렌더링 시간에 중점을 둡니다.
서버 측 렌더링 (SSR)
SSR (서버 측 렌더링)에는 자바스크립트로 클라이언트 측에서 웹페이지를 렌더링하는 대신 서버에서 웹페이지를 렌더링한 다음 완전히 렌더링된 HTML을 클라이언트의 브라우저로 보내는 작업이 포함됩니다. 사용자가 애플리케이션에 액세스하면 브라우저가 서버에 요청을 보냅니다. 애플리케이션은 서버에서 요청을 처리(데이터베이스 또는 외부 API에서 데이터 수집 포함)한 후 요청된 페이지의 HTML을 렌더링합니다. 그러면 서버는 페이지의 완전히 렌더링된 HTML을 사용자의 브라우저로 다시 전송합니다. 사용자의 브라우저가 HTML을 수신하면 브라우저가 필요한 자바스크립트 파일을 로드합니다.
SSR을 사용하면 빠른 초기 로드 속도, 우수한 검색엔진 최적화 (SEO) 성능, 안정성, 우수한 전반적인 사용자 환경 등의 이점이 있습니다. 하지만 SSR은 성능 오버헤드 및 SSR 지원 애플리케이션을 빌드하고 유지관리하는 데 필요한 개발 기술로 인해 클라이언트 측 렌더링 (CSR)보다 구현하기가 더 복잡할 수 있습니다. SSR은 특히 콘텐츠 기반 웹 애플리케이션, 전자상거래 플랫폼, 우수한 검색엔진 최적화 성능과 빠른 초기 응답 속도가 필요한 애플리케이션에 유용합니다.
정적 사이트 생성 (SSG)
정적 사이트 생성 (SSG)은 빌드 시간에 정적 HTML 파일을 생성하여 서버 측 또는 클라이언트 측 렌더링 없이 사용자에게 전송합니다. 웹 콘텐츠는 일반적으로 마크다운, JSON, YAML과 같은 구조화된 형식으로 작성되며 텍스트, 이미지, 기타 애셋을 포함합니다. Hugo 또는 Jekyll과 같은 정적 사이트 생성기 도구는 콘텐츠를 처리하고 HTML, CSS, 자바스크립트 파일을 생성합니다. 정적 출력은 전체 웹사이트이고, 이러한 정적 파일은 웹 서버, CDN 또는 호스팅 서비스에 배포됩니다.
web.dev에서 CSS 및 HTML에 관해 자세히 알아보세요.
파일은 정적이기 때문에 캐시될 수 있고 따라서 매우 빠르게 로드됩니다. SSG는 자주 변경되지 않는 웹 애플리케이션이나 주기적인 사이트 빌드를 통해 업데이트되는 웹 애플리케이션에 적합한 옵션입니다. 동적 상호작용이 있는 웹 애플리케이션에는 적합하지 않습니다.
클라이언트 측 렌더링 (CSR)
클라이언트 측 렌더링 (CSR)은 서버가 아닌 클라이언트의 브라우저에서 발생합니다. 웹 애플리케이션은 일반적으로 최소한의 HTML 템플릿에서 로드되며 이후 자바스크립트 및 서버 또는 API의 데이터를 사용하여 콘텐츠가 동적으로 조작됩니다. 애플리케이션을 요청한 후 서버는 페이지를 렌더링하는 데 필요한 기본 구조 및 자바스크립트 코드가 포함된 최소 HTML 문서를 전송합니다. JavaScript 코드는 사용자의 브라우저에서 실행됩니다. 그런 다음 가져온 데이터를 처리하고 CSS, HTML, 모든 상호작용 요소를 포함한 콘텐츠를 생성합니다. 그러면 JavaScript 코드가 양식 제출과 같은 사용자 상호작용에 응답합니다.
CSR의 장점은 빠른 페이지 전환 및 반응형 인터페이스입니다. CSR 기반 웹 애플리케이션은 SSR에 비해 초기 로드 시간이 느리며 검색엔진 최적화 문제가 발생할 수 있습니다. CSR 애플리케이션이 증가함에 따라 개발 및 유지 관리가 매우 복잡해질 수 있습니다.