AngularJS 服务器渲染(Server-Side Rendering,SSR)是一种在服务器端渲染 AngularJS 应用程序的技术。与传统的客户端渲染(Client-Side Rendering,CSR)不同,SSR 可以在用户在浏览器中加载应用程序之前,将应用程序的 HTML 呈现到页面上。
为什么需要 SSR?
在 CSR 中,浏览器加载 AngularJS 应用程序并在客户端动态渲染它。这意味着 AngularJS 应用程序将在客户端的浏览器上运行,需要等待客户端加载和解析 JavaScript 应用程序并执行浏览器端的处理。在高频访问和低速网络环境下,这会导致页面加载速度非常缓慢,并影响用户体验。
而SSR技术能在服务器端生成页面内容,使得浏览器在加载页面时不需要执行脚本,可以显著提高应用程序的加载速度,尤其是在低端设备和低速网络环境下。还可以提高搜索引擎蜘蛛的搜索效果和网站的 SEO 等多种用途。
如何实现 SSR?
让 AngularJS 应用程序在服务器上运行,需要使用 Node.js 服务器端来执行 JavaScript 应用程序。我们需要创建一个带有 Node.js 的 Express 应用程序,该应用程序捕捉浏览器请求,运行 AngularJS 应用程序,生成 HTML,并将其返回给浏览器。
下面是一个例子:
// server.js
const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');
const { enableProdMode } = require('@angular/core');
enableProdMode();
const clientPath = path.join(__dirname, './dist/browser');
const indexHtml = fs.readFileSync(path.join(clientPath, 'index.html'), 'utf8');
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
app.get('*.*', express.static(clientPath));
app.get('*', (req, res) => {
const baseUrl = `${req.protocol}://${req.get('host')}`;
const url = req.originalUrl;
const renderOptions = {
document: indexHtml,
url,
extraProviders
上一篇:AngularJs服务返回空列表