這篇文章將為大家詳細(xì)講解有關(guān)Angular4+server render服務(wù)端渲染怎么實(shí)現(xiàn)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、七臺(tái)河網(wǎng)站維護(hù)、網(wǎng)站推廣。

目標(biāo)：

1.更好的 SEO，方便搜索爬蟲抓取頁面內(nèi)容

2.更快的內(nèi)容到達(dá)時(shí)間(time-to-content)

影響：

1.用戶：比原來更快的看到渲染的頁面，提升用戶體驗(yàn)

2.開發(fā)人員：某些代碼可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行（window，document, navigator等）

安裝：

1.nodejs 建議6+

2.angular建議4.1+

理論實(shí)現(xiàn)：

盡管這是一張來自vue官網(wǎng)服務(wù)器渲染的一張示意圖，但是原理上和angular都是一樣的，只是實(shí)現(xiàn)的代碼不一致。

SSR 有兩個(gè)入口文件，app-client.js 和 app-server.js， 都包含了應(yīng)用代碼(appmodule)，webpack 通過兩個(gè)入口文件分別打包成給服務(wù)端用的 server bundle 和給客戶端用的 client bundle。

server bundle運(yùn)行在node，所以代碼里面若出現(xiàn)window,document等瀏覽器對(duì)象則會(huì)報(bào)錯(cuò)，可以引入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令牌注入的對(duì)象來檢查當(dāng)前平臺(tái)是瀏覽器還是服務(wù)器，從而解決該問題。

client bundle運(yùn)行在瀏覽器，所以在這用使用瀏覽器對(duì)象就完全沒有問題，但若涉及到像fs等node里才有的對(duì)象也會(huì)報(bào)錯(cuò)，解決方案同上。

所以說白了，server bundle就像是一個(gè)HTML文件的字符串，通過node渲染好后發(fā)送到前端，這個(gè)HTML字符串是可以同時(shí)運(yùn)行在node和瀏覽器的。

而 client bundle就像是一個(gè)js文件，我們前端里的所有事件都被包含在里面，我們可以在這里盡情地使用window對(duì)象。另外，盡管可以使用document對(duì)象，但是基于前端性能的考慮，還是不建議使用的。

 在使用angular這個(gè)項(xiàng)目中，開發(fā)環(huán)境用JIT，生產(chǎn)環(huán)境用AOT，這個(gè)應(yīng)該是沒有爭(zhēng)論的。（具體AOT和JIT的區(qū)別 可參考https://angular.cn/docs/ts/latest/cookbook/aot-compiler.html#!#aot-jit）

所以你也猜到了，我這個(gè)項(xiàng)目開發(fā)環(huán)境是瀏覽器渲染+JIT，生產(chǎn)環(huán)境是服務(wù)端渲染+AOT。

所以主要步驟歸納如下：

1．  清除編譯文件目錄下的所有文件。

2．  執(zhí)行ngc分別預(yù)編譯客戶端代碼和服務(wù)端代碼，然后用webpack打包，壓縮

3．  node執(zhí)行編譯后的server bundle代碼

具體代碼實(shí)現(xiàn)：

1、建立nodejs服務(wù)器，采用express框架（koa也是可以的)，監(jiān)聽端口

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、渲染頁面，處理請(qǐng)求

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服務(wù)端渲染能一定程度上優(yōu)化用戶體驗(yàn)，但是還是有個(gè)小問題，用戶首次加載時(shí)，仍然需要加載完整個(gè)網(wǎng)站的內(nèi)容。

所以我目前考慮在angular4 ssr的基礎(chǔ)上加入lazy load（懶惰加載，也稱按需加載），懶惰加載模塊可幫助我們減少啟動(dòng)時(shí)間。通過懶惰加載，我們的應(yīng)用程序不需要一次加載所有內(nèi)容，只需要加載用戶在首次加載應(yīng)用程序時(shí)看到的內(nèi)容。

只有當(dāng)用戶導(dǎo)航到他們的路由時(shí)，才會(huì)加載懶惰加載的模塊。以進(jìn)一步優(yōu)化用戶體驗(yàn)，待完成后再寫一遍隨筆記錄心路歷程。

關(guān)于“Angular4+server render服務(wù)端渲染怎么實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站欄目：Angular4+serverrender服務(wù)端渲染怎么實(shí)現(xiàn)
URL標(biāo)題：http://www.chinadenli.net/article4/pejiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、虛擬主機(jī)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)