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

转载已于 2022-01-27 15:07:19 修改 · 815 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.huazhaox.com/article/5

文章标签：

#服务器 #前端 #javascript

于 2022-01-27 15:04:33 首次发布

本文介绍了SSR服务端渲染的基本概念及其实现原理，并针对公共代码如何区分客户端和服务端的问题，提供了两种实用的解决方案。这有助于提高网页的加载速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 客户端，当然你也可以将判断条件进一步复杂化，以求万无一失。

原文链接：NodeJS SSR服务端渲染：公共代码区分客户端和服务端 - 花朝