Angular은 기본적으로 클라이언트 측에서 실행되는 프레임워크로, 서버 측에서 렌더링을 하지 않습니다. 하지만, 일부 프로젝트에서는 SEO 최적화 및 초기 렌더링 속도 향상을 위해 SSR이 필요할 수 있습니다. Angular Universal을 사용하여 Angular 애플리케이션을 서버 사이드 렌더링 할 수 있습니다.
Angular Universal이란?
Angular Universal은 서버 측 렌더링을 지원하기 위한 솔루션입니다. Angular Universal을 사용하면 Angular 애플리케이션을 서버 측에서 사전에 렌더링하여 초기 페이지 로드 속도를 향상시킬 수 있습니다.
Angular SSR 구성 단계
Angular 애플리케이션에서 SSR을 구성하는 단계는 다음과 같습니다.
- Angular Universal 설치
먼저, Angular Universal을 설치해야 합니다.ng add @nguniversal/express-engine -
AppServerModule 설정
AppServerModule을 생성하여 서버 측 코드를 설정합니다.AppServerModule은MainModule을 임포트하고,ServerModule을 추가하여 서버 측 애플리케이션을 정의합니다. -
서버 파일 생성
렌더링을 위한 서버 파일을 생성합니다. Express.js나 다른 Node.js 서버 프레임워크를 사용하여 서버를 설정합니다. - 빌드 및 실행
서버 측 코드를 빌드하고 실행합니다.npm run build:ssr npm run serve:ssr
SSR 구성 시 유의할 점
SSR을 구성할 때는 몇 가지 주의할 점이 있습니다.
-
서버 측 라우팅
서버 측 라우팅을 구현하여 클라이언트 측과 동일한 라우팅을 제공해야 합니다. -
상태 관리
서버 사이드 렌더링된 페이지와 클라이언트 측에서의 페이지를 동기화하기 위해 상태 관리를 적절하게 처리해야 합니다. -
써드파티 라이브러리 호환성
써드파티 라이브러리가 SSR과 호환되는지 확인해야 합니다.
Angular SSR을 구성하는 과정은 다소 복잡할 수 있지만, 충분한 성능 향상과 SEO 최적화를 위해 꼭 필요한 작업입니다. Angular Universal을 통해 SSR을 구현하면 클라이언트 측 렌더링만으로는 어려웠던 SEO 및 초기 로딩 성능 문제를 개선할 수 있습니다.
더 자세한 내용은 Angular Universal 공식 문서를 참고하세요.