基於Angular4+ 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， 都包含了應用代碼(appmodule)，webpack 經過兩個入口文件分別打包成給服務端用的 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分別預編譯客戶端代碼和服務端代碼，而後用webpack打包，壓縮

3．  node執行編譯後的server bundle代碼

 

具體代碼實現：

一、創建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}`);
});

 

二、渲染頁面，處理請求

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服務端渲染能必定程度上優化用戶體驗，可是仍是有個小問題，用戶首次加載時，仍然須要加載完整個網站的內容。

因此我目前考慮在angular4 ssr的基礎上加入lazy load（懶惰加載，也稱按需加載），懶惰加載模塊可幫助咱們減小啓動時間。經過懶惰加載，咱們的應用程序不須要一次加載全部內容，只須要加載用戶在首次加載應用程序時看到的內容。

只有當用戶導航到他們的路由時，纔會加載懶惰加載的模塊。以進一步優化用戶體驗，待完成後再寫一遍隨筆記錄心路歷程。