Angular v9 및 Universal: SSR 및 사전 렌더링 사용 가능!

최초 2020년 1월 5일 https://samvloeberghs.be 발표

대상 시청자

이 문서와 안내서는 Angular v9을 사용하는 모든 사람들이 서버 쪽 렌더링 (SSR) 을 시작하고 응용 프로그램을 미리 렌더링하도록 돕기 위한 것입니다.이 설명은 Angular v9을 사용하는 새 응용 프로그램이나 업데이트된 응용 프로그램에만 적용됩니다.각도 v2-v8의 같은 결과를 얻으려면 더 많은 사용자 정의 설정이 필요합니다.

샘플 항목

예시 항목에 대해 우리는 루트를 사용하는 최소 각도cli로 생성된 항목을 사용합니다.홈(/)과about(/about) 경로와 구성 요소도 생성되었습니다.로드가 지연되는 뉴스 모듈을 사용하여 추가 동적 개관(/news)과 뉴스 디테일(/news/:id) 루트를 구성합니다.
이 overview and detail 페이지의 데이터는 정적 자산 폴더(/assets/news.json)에서 불러온 간단한 JSON 데이터 대상입니다. 아래와 같습니다.

// /assets/news.json
[
  {
    "id": 1,
    "title": "Newsitem #1",
    "short": "Lorem ipsum dolor sit amet, ...",
  },
  {
    "id": 2,
    "title": "Newsitem #2",
    "short": "Lorem ipsum dolor sit amet, ..."
  }
]

다음 애니메이션은 응용 프로그램이 루트를 사용하고 동적 데이터를 불러오는 방법을 보여 줍니다.The full source code for this basic example application can be found here .

애플리케이션에 서버 측 렌더링(SSR) 추가

일반적으로 브라우저에서 Angular 응용 프로그램을 로드할 때만 렌더링됩니다.이 경우 웹 서버의 유일한 책임은 Angular 응용 프로그램의 정적 파일에 서비스를 제공하는 것입니다 (성공적으로 구축된 dist 폴더의 모든 내용).
SSR을 사용하면 응용 프로그램의 특정 경로(예를 들어 /about)가 브라우저에 나타나는 것처럼 서버에 완전히 표시됩니다.이로써 구글 등 검색엔진과 페이스북 등 소셜미디어 플랫폼은 앱 페이지의 미리보기를 인덱스하고 표시할 수 있게 되었다. 서버의 초기 불러오기에서 완전한 HTML을 얻을 수 있고 자바스크립트가 필요하지 않기 때문이다.

입문

사용을 시작하려면 angular cli를 사용하여 @nguniversal/express-engine 패키지를 추가하십시오.

ng add @nguniversal/express-engine@next
# as soon as v9 is released you can drop the "@next"

ng add 명령은 필요한 파일을 추가하고 angular.json 프로필을 업데이트하여 프로그램을 업데이트합니다.architect 부분에 3개의 새로운 설정이 추가되었습니다. server, serve-ssr과 prerender입니다.이 세 가지 설정은 모두 각자의 목적을 가지고 있으며, 그것들은 함께 우리가 필요로 하는 결과를 실현할 수 있도록 한다.우리 이 변화들을 좀 봅시다.

// updated angular.json
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "ng-v9-universal": {
      "..": "..",
      "architect": {
        "..": "..",
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/ng-v9-universal/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "..": ".."
            }
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "ng-v9-universal:build",
            "serverTarget": "ng-v9-universal:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng-v9-universal:build:production",
              "serverTarget": "ng-v9-universal:server:production"
            }
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "ng-v9-universal:build:production",
            "serverTarget": "ng-v9-universal:server:production",
            "routes": []
          },
          "configurations": {
            "production": {}
          }
        }
      }
    }
  }
  "..": ".."
}

서버 실행 옵션

시스템이나 백엔드에서 Angularbuild를 실행하려면 서버가 필요합니다. 따라서 server.ts 파일은 프로젝트의 루트 디렉터리에 추가됩니다.이 TypeScript 파일은 라우팅 및 서비스 응용 프로그램의 정적 자산을 렌더링하는 데 필요한 모든 설정을 포함합니다.13-15행에서 보듯이 이 서버의 출력 경로를 정의하고 서버 TypeScript 코드를 구축하는 방법을 정의하는 tsConfig입니다.browser 구축과 같이 우리는 생산에 특정한 환경 변수를 정의할 수 있다.
이 서버를 구축하는 것은 Angular 응용 프로그램을 구축하는 것처럼 간단합니다.터미널에서 다음 명령만 실행하면 서버는 dist/ng-v9-universal/server에 구축됩니다.

npm run build:ssr

serve ssr run 옵션

응용 프로그램을 개발할 때 ng serve만 실행하면 됩니다.이 명령은 dev 서버를 설정하고 열 재부팅 및 기타 모든 것을 제공하여 좋은 개발 체험을 제공합니다.
테스트 서버 측의 렌더링 부분도 개발 과정에서 완성할 수 있다.이를 위해 ng run ng-v9-universal:serve-ssr 형식으로 프로그램을 실행하면 서버 원본 파일이 프로그램 원본 파일 옆에서 감시됩니다.실시간으로 다시 불러오기 때문에 프로그램이나 서버의 코드를 변경하면 자동으로 프로그램이 다시 시작됩니다.
현재 뉴스 개요 (/news) 와 같은 페이지를 다시 로드하면 초기 로드에는 동적 데이터를 포함한 뉴스 개요의 전체 구현 HTML이 포함됩니다.

미리 렌더링 실행 옵션

마지막 보충은 응용 프로그램을 미리 렌더링할 수 있는 루트입니다.이를 위해 사전 렌더링 생성기는 guess-parser(@mgechev으로 구축됨)을 사용하여 정적 경로를 추측합니다.응용 프로그램의 루트 모듈을 분석하고 찾은 루트를 미리 보여 줍니다.
응용 프로그램의 라우트를 미리 렌더링하려면 다음을 실행하십시오.

npm run prerender

추가 (동적) 라우팅 렌더링

41 줄의 angular.json 프로필과 같이 응용 프로그램의 다른 알려진 경로를 표시할 수 있습니다.예를 들어 우리의 예에서 우리는 /news, /news/1과 /news/2의 노선을 열거할 수 있다.그러면 생성기에서도 추가 파이프라인을 미리 렌더링할 수 있습니다.특히 로드 지연 모듈에 대해 이것은 매우 중요할 수 있다. 왜냐하면 추측 해상기가 이 모듈들을 쉽게 추측하지 못하기 때문이다.
예시 프로그램의 뉴스 디테일 페이지와 같은 동적 경로를 보여주기 위해서는 더 많은 논리가 필요하다.기본적으로 미리 렌더링된 경로를 미리 렌더링하는 방법을 찾아야 합니다.예를 들어 list-routes.js 스크립트를 정의하면 텍스트 파일의 모든 경로를 보여 줍니다.그런 다음 미리 렌더링된 스크립트에 파일을 다음과 같이 전달할 수 있습니다.

npm run prerender --routesFile routes.txt

다음은 모든 필수 라우팅을 나열하는 스크립트의 예입니다.렌더링 전에 이 텍스트 파일에 나열된 모든 라우트를 routes 구성 파일의 angular.json 배열에 정의된 라우트에 추가합니다.

// scripts/list-routes.js
const fs = require('fs');
const axios = require('axios');
const endOfLine = require('os').EOL;
const newsDataPath = 'http://localhost:4200/assets/news.json';
const routesFile = './routes.txt';

axios.get(newsDataPath).then(res => {
  const routes = [];
  res.data.forEach(newsitem => {
    routes.push('news/' + newsitem.id);
  });
  fs.writeFileSync(routesFile, routes.join(endOfLine), 'utf8');
}).catch(e => console.log(e));

package.json의 스크립트는 다음과 같습니다.

// updated package.json
{
  "name": "ng-v9-universal",
  "version": "0.0.0",
  "scripts": {
    "..", "..",
    "list-routes": "node ./scripts/list-routes.js",
    "prerender": "npm run list-routes && ng run ng-v9-universal:prerender --routesFile routes.txt"
  },
  "..": ".."
}

중요 npm run prerender 명령을 실행할 때 응용 프로그램도 실행되고 있는지 확인하십시오.응용 프로그램은 모든 루트를 미리 렌더링하기 위해 정적 파일 /assets/news.json을 사용해야 합니다!다른 터미널에서ngserve를 실행함으로써 이 점을 실현할 수 있습니다.

결론

나는 Angular v2와 Universal로 이 블로그를 시작했는데 2016년으로 돌아가면 구축하기가 쉽지 않다.Angular v9을 가진 유니버설은 개발자들의 체험을 크게 개선했고 현재는 명확한 정의를 따르기만 하면 된다.
테스트 응용 프로그램과 서버 측의 버전 표시는 현재 명령으로 사용할 수 있습니다.npm run dev:ssr만 실행하면 시작합니다!
정적 라우팅을 미리 렌더링하는 것은 매우 쉽습니다. 로드가 지연되는 라우팅을 사용하지 않는 한 guess-parser은 이 라우팅을 추측하기 어렵습니다.모든 노선을 렌더링하는 방법이 필요합니다.이것은 파일에 루트를 표시하고 --routesFile 옵션을 사용하여 생성기에 제공할 수 있습니다.노선 목록을 어떻게 이해하는지는 당신에게 달려 있습니다.

한층 더 읽다

Angular Universal v9: What's New?