NodeJS SSR服务端渲染:公共代码区分客户端和服务端

SSR服务端渲染(英语:server side render)指一般情况下,一个web页面的数据渲染完全由客户端或者浏览器端来完成。先从服务器请求,然后到页面;再通过AJAX请求到页面数据并把相应的数据填充到模板,形成完整的页面来呈现给用户。服务端渲染把数据的初始请求放在了服务端,服务端收到请求后,把数据填充到模板形成完整的页面,由服务端把渲染的完整的页面返回给客户端。这样减少了一次客户端到服务端的HTTP请求,加快了相应速度,一般用于性能优化。

在实现 SSR 服务端渲染时,一些代码会在两端都被加载,在这些公共代码中,如果用到了 window等服务端没有的属性方法,那么在服务端就会报错,反之亦然。以下提供了我在实践中想到的几种方案:

一、typeof 判断是否为 undefined

if(typeof window != 'undefined') {
	// 是客户端
} else {
	// 是服务端
}

二、分别在两端的全局对象上挂载一个判断变量

服务端在全局对象 global声明,客户端在全局对象 window声明:

// 服务端
global.__CLIENT = false

// 客户端
window.__CLIENT = true

// 在公共代码中判断是客户端还是服务端
if(__CLIENT) {
	// 客户端
} else {
	// 服务端
}

总结

以上提供了最简单但有效的方法来在公共代码中判断是 NodeJS 服务端还是 JavaScript 客户端,当然你也可以将判断条件进一步复杂化,以求万无一失。

0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!