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

本文由花朝网原创首发,授权转载请以链接形式注明出处,本文唯一永久链接:http://www.huazhaox.com/article/5

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 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
  • //中间件import jwt from "jsonwebtoken"; import {resultFail} from "../common/utils"; import {SECRET} fro...

  • 概述写这篇blog的原因,想找个node的ORM框架用用,确很难找到一篇对比分析这些ORM框架的文章,唯一找到了一篇,居然是通过star数来论英雄,我觉着很难服众,于是就找几个看看。后来又不想分析,因...

  • Express 快速创建 Web 服务器 express 的基本使用 先安装express包 npm i express@4.17.1 1.导入 express const express = re...

  • 前言消息队列是存储数据的一个中间件,可以理解为一个容器。生产者生产消息投递 到队列中,消费者可以拉取消息进行消费,如果消费者目前没有消费的打算,则消息队列会保留消息,直到消费者有消费的打算。设计思路生...

  • nodejs是单线程执行的,同时它又是基于事件驱动的非阻塞IO编程模型。这就使得我们不用等待异步操作结果返回,就可以继续往下执行代码。当异步事件触发之后,就会通知主线程,主线程执行相应事件的回调。以上...

  • Renode 是一个开发框架,通过让你模拟物理硬件系统来加速物联网和嵌入式系统开发。 Renode 可以模拟 Cortex-M、RISC-V 等微控制器,不仅可以模拟 CPU指令,还可以模拟外设,甚至...

  • node.js 初探Node.js 是一个 JS 的服务端运行环境,简单的来说,它是在 JS 语言规范的基础上,封装了一些服务端的运行时对象,让我们能够简单实现非常多的业务功能。如果我们只使用 JS ...

  • 读取文件夹fs.readdirSync('./')判断文件类型fs.statSync(item).isDirectory()路径拼接path.resolve(dir, item)封装function ...

  • jwt是json web token的简称,本文介绍它的原理,最后后端用nodejs自己实现如何为客户端生成令牌token和校验token1.为什么需要会话管理我们用nodejs为前端或者其他服务提供...

  • 大家好,我卡颂。22年11月14日,Deno发布了v1.28,距离他第一个稳定版本v1.0.0发布(2020年5月13日)已过去2年。作为Node.js的竞争者,Deno似乎并没有达到取代前者的目标。...

  • Node.js 有哪些特性?在应用构建的时候有哪些注意事项?入门同学如何实现技术进阶?本期大咖说,阿里云高级技术专家朴灵携作品《深入浅出 Node.js》展开分享。https://www.youku....

  • 进程:process模块process 模块是 nodejs 提供给开发者用来和当前进程交互的工具,它的提供了很多实用的 API。从文档出发,管中窥豹,进一步认识和学习 process 模块:如何处理...

  • 1.前言 Node.js 是一个开源和跨平台的 JavaScript 运行时环境 Node.js 在浏览器之外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这...

  • nodejs的出现为前端行业带来了无限的可能性,让很多原来只负责客户端开发的同学也慢慢开始接触和使用服务器端技术.虽然nodejs带来了很多的好处,但是它也存在自身的局限性.和那些传统老牌的编程语言相...

  • 百度站长 post 推送示例是这样的:POST /urls?site=www.huazhaox.com&token=jxa26LMj9x1An7QhHTTP/1.1 User-Agent: curl...

  • 一、常见的全局对象 1.全局对象的定义 全局对象(Global Object),它及其所有属性都可以在程序的任何地方访问,即全局变量。 在浏览器JavaScript中,通常window是全局对象 在...

  • 此处如无特殊指出的话,event loop的语境都是指nodejs本文研究所用的nodejs环境是:操作系统window10 + nodejs版本号为v12.16.2什么是event loop?eve...

  • 本文只讨论 CommonJS 规范,不涉及 ESM我们知道 JavaScript 这门语言诞生之初主要是为了完成网页上表单的一些规则校验以及动画制作,所以布兰登.艾奇(Brendan Eich)只花了...

  • 我们都知道Nodejs遵循的是CommonJS规范,当我们require('moduleA')时,模块是怎么通过名字或者路径获取到模块的呢?首先要聊一下模块引用、模块定义、模块标识三个概念。1 Com...

  • 我用node-schedule这个 NPM 包演示实现过程,当然你原来用什么包就用什么包,我只是提供一种实现随机执行定时任务的方法思路。const schedule = require('node-s...