Angular 4+server render(서버 렌 더 링)기반 개발 튜 토리 얼

목표:
1.더 좋 은 SEO,파충류 잡기 페이지 내용 검색
2.더 빠 른 내용 도착 시간(time-to-content)
영향:
1.사용자:렌 더 링 된 페이지 를 원래 보다 빨리 보고 사용자 체험 향상
2.개발 자:일부 코드 는 특수 처리 가 필요 할 수 있 습 니 다.서버 렌 더 링 프로그램 에서 실행 할 수 있 습 니 다(window,document,navigator 등)
설치:
1.nodejs 제안 6+
2.angular 권장 4.1+
이론 실현:

비록 이것 은 vue 홈 페이지 서버 에서 보 여 준 설명도 이지 만 원리 적 으로 angular 와 같 고 실 현 된 코드 만 일치 하지 않 습 니 다.
SSR 에는 두 개의 입구 파일 이 있 는데 app-client.js 와 app-server.js 는 모두 응용 코드(app module)를 포함 하고 웹 팩 은 두 개의 입구 파일 을 통 해 서버 에 사용 할 server bundle 과 클 라 이언 트 에 사용 할 client bundle 로 각각 포장 합 니 다.
server bundle 은 node 에서 실행 되 기 때문에 코드 에 window,document 등 브 라 우 저 대상 이 나타 나 면 오류 가 발생 할 수 있 습 니 다.jsdom 을 도입 하여 해결 할 수 있 지만 귀 찮 습 니 다.angular 공식 추천 방법 을 사용 하 는 것 을 권장 합 니 다.

import { PLATFORM_ID } from '@angular/core';

import { isPlatformBrowser, isPlatformServer } from '@angular/common';

 

constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

 

ngOnInit() {

 if (isPlatformBrowser(this.platformId)) {

   // Client only code.

   ...

 }

 if (isPlatformServer(this.platformId)) {

  // Server only code.

  ...

 }

} 

PLATFORM 통과 하기ID 토 큰 이 주 입 된 대상 은 현재 플랫폼 이 브 라 우 저 인지 서버 인지 확인 하여 이 문 제 를 해결 합 니 다.
client bundle 은 브 라 우 저 에서 실행 되 기 때문에 브 라 우 저 대상 을 사용 하 는 것 은 전혀 문제 가 없 지만 fs 등 node 에 있 는 대상 에 대해 서도 오 류 를 보고 할 수 있 습 니 다.해결 방안 은 같 습 니 다.
그래서 말하자면 server bundle 은 HTML 파일 의 문자열 과 같 습 니 다.node 를 통 해 렌 더 링 을 한 후에 전단 으로 보 냅 니 다.이 HTML 문자열 은 node 와 브 라 우 저 에서 동시에 실행 할 수 있 습 니 다.
client bundle 은 js 파일 과 같 습 니 다.우리 전단 에 있 는 모든 사건 이 포함 되 어 있 습 니 다.우 리 는 여기에서 window 대상 을 마음껏 사용 할 수 있 습 니 다.또한,document 대상 을 사용 할 수 있 지만 전단 성능 을 고려 하여 사용 하 는 것 을 권장 하지 않 습 니 다.
 angular 를 사용 하 는 프로젝트 에서 개발 환경 용 JIT,생산 환경 용 AOT 는 논쟁 이 없 을 것 이다.(구체 적 인 AOT 와 JIT 의 차 이 는 참고 할 수 있다https://angular.cn/docs/ts/latest/cookbook/aot-compiler.html#!#aot-jit)
그래서 제 프로젝트 개발 환경 은 브 라 우 저 렌 더 링+JIT 이 고 생산 환경 은 서버 렌 더 링+AOT 입 니 다.
그래서 주요 절 차 는 다음 과 같다.
1．  컴 파일 파일 파일 디 렉 터 리 에 있 는 모든 파일 을 삭제 합 니 다.
2．  ngc 를 실행 하여 클 라 이언 트 코드 와 서버 코드 를 각각 사전 컴 파일 한 다음 웹 팩 으로 압축 합 니 다.
3．  node 컴 파일 된 server bundle 코드 실행
구체 적 인 코드 구현:
1.nodejs 서버 를 구축 하고 express 프레임 워 크(koa 도 가능),감청 포트 를 사용 합 니 다.

const express = require('express');
const desktop = express();

const port = process.env.NODE_PORT ? process.env.NODE_PORT : 4200;

desktop.listen(port + 1, () => {
 console.log(`Desktop Listening on: http://localhost:${port}`);
});

2.렌 더 링 페이지,처리 요청

import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { AppServerModuleNgFactory } from './app-server.module.ngfactory';

const ROOT = path.join(path.resolve(__dirname),'..','build');

 function response(req, res) {
  res.render(`index.html`, {
   req,
   res
  });
 }

 app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory
 }));

 app.set('view engine', 'html');
 app.set('views', ROOT);

 app.get('/', response);
 routes.forEach((r) => {
   app.get(r, response);
   app.get(`${r}/*`, response);
  }
 );

angular 서버 렌 더 링 은 어느 정도 에 사용자 체험 을 최적화 시 킬 수 있 지만 작은 문제 가 있 습 니 다.사용자 가 처음으로 불 러 올 때 전체 사이트 의 내용 을 불 러 와 야 합 니 다.
그래서 저 는 현재 angular 4 ssr 를 바탕 으로 lazy load(게 으 름 로드,필요 에 따라 로드)를 추가 하 는 것 을 고려 하고 있 습 니 다.게 으 름 로드 모듈 은 시작 시간 을 줄 이 는 데 도움 을 줄 수 있 습 니 다.게 으 름 을 통 해 불 러 옵 니 다.프로그램 은 한 번 에 모든 내용 을 불 러 올 필요 가 없습니다.사용자 가 프로그램 을 처음 불 러 올 때 본 내용 만 불 러 옵 니 다.
사용자 가 길 을 탐색 할 때 만 게 으 른 로 딩 모듈 을 불 러 옵 니 다.사용자 체험 을 더욱 최적화 시 키 고 완성 한 후에 수필 로 심 로 를 기록 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.