Angular 유니버설 (Universal) SSR 개념 및 구현 방법
목차
Angular 유니버설(SSR)이란?
Angular 유니버설(SSR)은 Angular 프레임워크를 사용하여 구축된 웹 애플리케이션을 서버에서 사전 렌더링하여 클라이언트로 제공하는 기술입니다. 이를 통해 브라우저에서 페이지를 로드할 때 필요한 최소한의 HTML, CSS 및 JavaScript만 전달되어 초기 로딩 속도가 향상됩니다.
Angular 유니버설은 검색 엔진 최적화(SEO) 및 소셜 미디어 공유와 같은 기능에 매우 중요한 역할을 합니다. 검색 엔진은 사전 렌더링된 페이지를 쉽게 읽고 색인할 수 있으므로 애플리케이션의 검색 가능성이 향상됩니다.
Angular 유니버설(SSR) 구현 방법
Angular 유니버설(SSR)을 구현하는 방법은 다음과 같습니다.
- Angular CLI를 사용하여 프로젝트 생성 및 설정
- Angular CLI를 사용하여 프로젝트를 생성하고, SSR을 위한 설정을 추가합니다.
- 서버 사이드 렌더링 설정
- Express, NestJS 등의 Node.js 서버 프레임워크를 사용하여 SSR을 설정합니다.
- Angular Universal 패키지를 설치하고, 서버 사이드 애플리케이션을 만듭니다.
- 애플리케이션 코드 수정
- 각각의 Angular 컴포넌트에 대해 서버 사이드 렌더링이 필요한 부분을 처리할 수 있는 코드를 작성합니다.
- 서버와 클라이언트 구성 파일 수정
- Angular Universal을 사용하여 애플리케이션을 빌드하고 시작할 때 서버 및 클라이언트 구성 파일을 수정합니다.
- 서버 실행 및 빌드
- 서버를 실행하고 애플리케이션을 빌드하여 SSR이 적용된 버전을 생성합니다.
- 테스트 및 배포
- 서버에서 애플리케이션을 테스트하고, 필요한 경우 배포합니다.
Angular 유니버설(SSR)을 구현하는 방법에는 추가적인 설정과 코드 작성이 필요하지만, 그 결과로 애플리케이션의 성능과 SEO 등의 측면에서 큰 이점을 얻을 수 있습니다.
더 자세한 내용은 Angular Universal 공식 문서를 참조하시기 바랍니다.