使用 Angular Universal 进行服务器端渲染避免 window is not defined 的错误消息

简介: 使用 Angular Universal 进行服务器端渲染避免 window is not defined 的错误消息

尽管 Universal 项目的目标是能够在服务器上无缝呈现 Angular 应用程序,但开发人员还是应该考虑一些注意事项。


首先,服务器和浏览器环境之间存在明显差异。 在服务器上呈现时,您的应用程序处于 ephemeral 或者 Snapshot 状态。


应用程序完全呈现一次,返回生成的 HTML,其余应用程序状态在下一次呈现之前被销毁。


其次,服务器环境本质上不具有与浏览器相同的功能(并且具有一些浏览器同样不具有的功能)。 例如,服务器没有任何cookies 的概念。


固然开发人员可以 polyfill 来一定程度上规避这个问题,但是没有完美的解决方案。


另请注意 SSR 的目标:改进应用程序的初始渲染时间。 这意味着应避免或充分防范任何可能降低此初始渲染中应用程序速度的情况出现。


一些 启用 SSR 后的常见错误:


window is not defined


使用 Angular Universal 时最常见的问题之一是服务器环境中缺少浏览器全局变量。 这是因为 Universal 项目使用 domino 作为服务器 DOM 呈现引擎。 因此,服务器上不会存在或不支持某些功能。 这包括窗口和文档全局对象、cookie、某些 HTML 元素(如画布)和其他几个。 Domino 代表节点中的 DOM.

76264207fef2447fb562c85eb809c20a.png

解决这个错误的一些思路:

通常,需要的全局变量可以通过 Angular 平台通过依赖注入 (DI) 获得。 例如,全局文档可通过 DOCUMENT 令牌获得。 此外,通过 DOCUMENT 对象可以获得 window 和 location 的非常原始的版本。 例如:

示例代码如下:

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable()
export class ExampleService {
  constructor(@Inject(DOCUMENT) private _doc: Document) {}
  getWindow(): Window | null {
    return this._doc.defaultView;
  }
  getLocation(): Location {
    return this._doc.location;
  }
  createElement(tag: string): HTMLElement {
    return this._doc.createElement(tag);
  }
}


相关文章
|
3天前
|
JavaScript 搜索推荐 前端开发
理解服务器端渲染(SSR):提高网页性能与SEO的秘籍
理解服务器端渲染(SSR):提高网页性能与SEO的秘籍
|
5天前
|
资源调度
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在 Next.js 中使用自定义服务器框架进行服务器端渲染
Next.js 的服务器端渲染框架集成
Next.js 的服务器端渲染框架集成
|
5天前
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
14 2
|
5天前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
5天前
|
缓存 JavaScript 前端开发
Vue的服务端渲染:Vue的服务器端渲染(SSR)技术详解
【4月更文挑战第24天】Vue的服务器端渲染(SSR)能解决SPA的首屏加载和SEO问题。SSR预渲染HTML,提升首屏速度,改善SEO,提供更好的用户体验。Nuxt.js是Vue的SSR框架,简化开发流程。但SSR增加服务器压力,开发成本高,且需处理缓存问题。选择SSR需权衡优劣。本文旨在帮助理解Vue SSR原理、优势及实践方法。
|
5天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
21 0
|
5天前
|
数据采集 搜索推荐 JavaScript
Next.js进阶:静态生成、服务器端渲染与SEO优化
【4月更文挑战第13天】Next.js是现代Web开发的关键框架,以其对静态生成(Static Generation)、服务器端渲染(Server-Side Rendering)和SEO的支持而备受青睐。本文深入解析了这三个核心特性的原理、应用和最佳实践。静态生成在构建时生成HTML,适用于内容更新少的页面,通过`getStaticProps`和`getStaticPaths`获取静态数据。服务器端渲染则在每次请求时生成HTML,适合实时数据,使用`getServerSideProps`获取服务器端数据。
32 0
|
5天前
|
搜索推荐 SEO 缓存
为什么 Angular 服务器端渲染只面向匿名用户,没有用户上下文
为什么 Angular 服务器端渲染只面向匿名用户,没有用户上下文
14 0
|
5天前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
13 0

热门文章

最新文章

http://www.vxiaotou.com