Angular SSR을 사용한 서버 측 렌더링

이 주제에서는 서버 측 렌더링이 무엇이고 Ignite UI for Angular 내에서 이를 구성하는 방법을 설명합니다.

Angular Server-side rendering

모든 Angular 응용 프로그램은 클라이언트의 브라우저에서 실행되며, 이로 인해 브라우저가 페이지의 가장 큰 콘텐츠를 처음 렌더링할 때 LCP(Largest Contentful Paint)에서 부정적인 성능 저하가 발생할 수 있습니다. 이때 SSR Angular 유용할 때 서버의 페이지에 대한 전체 HTML을 생성할 수 있습니다. 클라이언트 측 페이지를 서버의 HTML로 렌더링하여 나중에 클라이언트에서 부트스트랩합니다. 좋아요, 하지만 어떻게 작동합니까?

LCP는 페이지의 가장 큰 컨텐츠가 사용자에게 표시되는 시점을 측정하며, FCP 메트릭과 마찬가지로 사용자가 페이지를 탐색한 후 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정합니다. 자세한 내용은 Lighthouse 성능 점수를 참조하세요.

How it works?

Angular SSR을 사용하면 앱 방문 페이지의 정적 버전을 제공하는 동시에 전체 Angular 애플리케이션이 백그라운드에서 로드됩니다. 랜딩 페이지는 순수 HTML이며 JavaScript가 비활성화되어 있어도 표시됩니다. 서버 렌더링에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

Usage

서버 측 렌더링은 웹에서 렌더링 지침의 많은 기술 중 하나이며 다음을 수행할 수 있습니다.

웹 크롤러를 사용하면 검색에서 웹사이트의 색인을 더 많이 생성할 수 있어 검색 엔진 최적화(SEO)가 향상됩니다.
첫 번째 페이지를 빠르게 표시 - 느린 초기 페이지 로드는 사용자의 관심을 끕니다(로드하는 데 3초 이상 걸리는 경우).
앱 성능 향상 -First Contentful Paint와 Largest Contentful Paint 모두에 긍정적인 영향을 미칩니다.

SEO 및 소셜 미디어 미리 보기를 완벽하게 제어할 수 있으며 사용자가 초기에 그려진 보기를 볼 수 있도록 하여 애플리케이션의 전반적인 인지 성능을 향상시킵니다.

Add SSR to existing Ignite UI application

Step 1 - Add @angular/ssr

Angular CLI 도식을 사용하면 다음 명령을 실행할 수 있습니다.

ng add @angular/ssr
llvm

이 회로도는 앱 클라이언트 및 서버 구성에 대한 몇 가지 변경 사항을 수행하고 프로젝트 구조에 추가 파일을 추가합니다.

Step 2 - Start your Angular SSR app

다음 명령을 실행하십시오.

ng serve
ebnf

Build a new application from scratch

쓰다 ng new 또는 Ignite UI CLI ig new 명령. 또는 다음을 사용합니다. ng new --ssr 새 Angular SSR 프로젝트를 직접 만들려면 3단계를 건너뜁니다.
라이브러리의 npm 패키지를 작업 공간에 설치하고 해당 라이브러리를 사용하도록 현재 작업 디렉터리의 프로젝트를 구성하는 ng add igniteui-angular 실행합니다.
로 ng add @angular/ssr SSR Angular 추가하십시오.
Ignite UI for Angular 구성 요소 추가(예: 그리드, 캘린더)

Other considerations

애플리케이션에서 다른 브라우저별 객체를 사용하는 경우, 해당 객체를 조건문으로 래핑하여 브라우저에서만 Angular가 사용하도록 합니다. @angular/common에서 isPlatformBrowser 및 isPlatformServer 함수를 가져오고, PLATFORM_ID 토큰을 구성 요소에 주입하고, 가져온 함수를 실행하여 서버인지 브라우저인지 확인합니다.
HTML 요소 처리에 ElementRef를 사용하는 경우 요소의 속성을 조작하기 위해 NativeElement를 사용하지 마세요. 대신 Renderer2 메소드를 삽입하고 사용하세요.
서버 요청에 대한 모든 URL은 절대 URL이어야 합니다. 서버에서 실행할 때 상대 URL의 데이터 요청이 실패한다는 점을 명심하세요.
브라우저 이벤트를 처리하기 위해 Angular 팀은 withEventReplay() 함수를 제공합니다. 이 기능을 사용하면 수화 전에 발생하는 모든 이벤트를 캡처하고 수화가 완료되면 해당 이벤트를 재생할 수 있습니다.
IgxIconService를 사용하여 아이콘을 등록하는 경우 공급자에 provideHttpClient()를 구성했는지 확인하십시오.
Angular SSR을 사용할 때 서버는 사용자가 볼 수 있는 페이지를 미리 렌더링하지만 상호 작용은 제한됩니다. 클라이언트 쪽 앱이 백그라운드에서 로드되면 서버 렌더링 페이지 표시에서 클라이언트 쪽 앱으로 원활하게 전환됩니다.