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로 구성되며, 자바스크립트가 비활성화되어 있어도 표시됩니다. 서버 렌더링에 대한 자세한 내용은 Rendering on the Web 가이드에서 확인할 수 있습니다.

    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

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

    Step 2 - Start your Angular SSR app

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

    ng serve

    Build a new application from scratch

    1. 사용ng new 또는 Ignite UI CLI ig new 지휘부. 또는 다음을 사용하세요ng new --ssr 3단계를 건너뛰고 직접 새로운 Angular SSR 프로젝트를 생성하는 것.
    2. 실행ng add igniteui-angular 명령은 라이브러리의 npm 패키지를 작업 공간에 설치하고, 현재 작업 디렉터리의 프로젝트를 해당 라이브러리를 사용하도록 설정합니다.
    3. SSRng add @angular/ssr Angular 추가하세요.
    4. Ignite UI for Angular 구성 요소 추가(예: 그리드, 캘린더)

    Other considerations

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

    Useful resources