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?

    With Angular SSR, you will serve a static version of your apps' landing page, while at the same time the full Angular application loads in the background. The landing page will be pure HTML and will be displayed even if the JavaScript is disabled. More about Server Rendering you can find in the Rendering on the Web guide.

    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. Use ng new or the Ignite UI CLI ig new command. Alternatively, use ng new --ssr to create a new Angular SSR project directly, skipping step 3.
    2. Execute ng add igniteui-angular which installs the library's npm packages to your workspace and configures the project in the current working directory to use that library.
    3. Add Angular SSR with ng add @angular/ssr.
    4. Ignite UI for Angular 구성 요소 추가(예: 그리드, 캘린더)

    Other considerations

    • If your application is using other browser-specific objects, wrap their usage in a conditional statement, so that they’ll only be used by Angular on the browser. You can do this by importing the functions isPlatformBrowser and isPlatformServer from @angular/common, injecting the PLATFORM_ID token into your component, and running the imported functions to see whether you’re on the server or the browser.
    • HTML 요소 처리에 ElementRef를 사용하는 경우 요소의 속성을 조작하기 위해 NativeElement를 사용하지 마세요. 대신 Renderer2 메소드를 삽입하고 사용하세요.
    • 서버 요청에 대한 모든 URL은 절대 URL이어야 합니다. 서버에서 실행할 때 상대 URL의 데이터 요청이 실패한다는 점을 명심하세요.
    • 브라우저 이벤트를 처리하기 위해 Angular 팀은 withEventReplay() 함수를 제공합니다. 이 기능을 사용하면 수화 전에 발생하는 모든 이벤트를 캡처하고 수화가 완료되면 해당 이벤트를 재생할 수 있습니다.
    • IgxIconService를 사용하여 아이콘을 등록하는 경우 공급자에 provideHttpClient()를 구성했는지 확인하십시오.
    • Angular SSR을 사용할 때 서버는 사용자가 볼 수 있는 페이지를 미리 렌더링하지만 상호 작용은 제한됩니다. 클라이언트 쪽 앱이 백그라운드에서 로드되면 서버 렌더링 페이지 표시에서 클라이언트 쪽 앱으로 원활하게 전환됩니다.

    Useful resources