【NodeJS】nodejs后端渲染html

背景

Node.js 后端渲染 HTML 在提高网站性能、优化用户体验、简化前端开发流程以及提升内容可抓取性等方面都具有显著的价值。这种模式特别适用于那些不需要复杂交互的网站,例如博客、产品页面或者一些信息发布平台等。然而,对于需要高度交互和动态用户体验的应用,前端渲染可能更为合适。在实际开发中,应根据具体需求和场景选择最合适的渲染策略。

正文

样例源码:

server.js

const http = require('http');
const fs = require('fs');
http.createServer(function (req, res) {
  fs.readFile('server.html', function(err, data) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    res.end();
  });
}).listen(8080);

server.html

<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
</head>
<body>
hello world
</body>
</html>

启动命令:

node server.js

运行效果:

注意事项:

针对web开发,我们经常会谈到前端渲染、后端渲染,这个是要根据业务场景以及技术选型来确定的。

如何看是属于前端渲染还是后端渲染呢?

  1. 一般情况下,像在应用服务器(Tomcat、JBoss等)定义了基于FreeMarker技术的html模板,当用户从浏览器端像服务器发起过来一个http请求,服务器端收到请求后,动态的对html模板进行坑位填充,补全了html,然后通过响应把html内容返回到浏览器端,这就是所谓的后端渲染。当最终的页面展示肯定还是在浏览器上,浏览器把html、css、js给真正展示出来,如果从单单从字眼来看,也许这样就叫后端渲染不一定准确(毕竟只是做了个模板替换,把html推送到浏览器端),但是我们姑且就这么理解吧。
  2. 像使用Vue、AngularJS这种属于典型的前端渲染。服务器端只是提供数据,浏览器端把Vue、AngularJS的页面、组件等UI信息结合着后端响应回来的数据,组装好之后,展示出来最终的效果。

本文只是一个基于nodejs作为应用服务器的小例子。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/329782.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

华为路由设备DHCPV6配置

组网需求 如果大量的企业用户IPv6地址都是手动配置&#xff0c;那么网络管理员工作量大&#xff0c;而且可管理性很差。管理员希望实现公司用户IPv6地址和网络配置参数的自动获取&#xff0c;便于统一管理&#xff0c;实现IPv6的层次布局。 图1 DHCPv6服务器组网图 配置思路 …

海外软文发稿:谷歌关键词排名与社交媒体互动的联动-大舍传媒

海外软文发稿&#xff1a;谷歌关键词排名与社交媒体互动的联动-大舍传媒 在当今数字化社会&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为网站蓬勃发展的关键因素。然而&#xff0c;在谷歌这样的搜索引擎中&#xff0c;关键词排名仅仅是成功的一部分。社交媒体…

Leetcode2596. 检查骑士巡视方案

Every day a Leetcode 题目来源&#xff1a;2596. 检查骑士巡视方案 解法1&#xff1a;广度优先搜索 这是有点特殊的广度优先搜索&#xff0c;每个位置需要搜索 8 个方向&#xff0c;但最终只选择其中的一个方向走下去。 所以不需要使用队列&#xff0c;也不需要标记数组&…

leetcode:2283. 判断一个数的数字计数是否等于数位的值(python3解法)

难度&#xff1a;简单 给你一个下标从 0 开始长度为 n 的字符串 num &#xff0c;它只包含数字。 如果对于 每个 0 < i < n 的下标 i &#xff0c;都满足数位 i 在 num 中出现了 num[i]次&#xff0c;那么请你返回 true &#xff0c;否则返回 false 。 示例 1&#xff1a…

IIS 缓存, 更新后前端资源不能更新问题

解决办法: 通常只需要index.html 不缓存即可, 其他文件都是根据index.html 中的引用去加载; 正确的做法是在 站点下增加 web.config 文件, 内容如下: 我这个是因为目录下有个config.js 配置文件, 也不能缓存, 所以加了两个 <?xml version"1.0" encoding&quo…

ARM 1.17

波特率 波特率&#xff08;bandrate&#xff09;,指的是串口通信的速率&#xff0c;也就是串口通信时每秒钟可以传输多少个二进制位。比如每秒钟可以传输9600个二进制&#xff08;传输一个二进制位需要的时间是1/9600秒&#xff0c;也就是104us&#xff09;&#xff0c;波特率就…

nginx+lua配置,一个域名配置https,docker集群使用

没安装kua的先安装lua 没有resty.http模块的&#xff0c;许配置 nginxlua配置&#xff0c;一个域名配置https&#xff0c;docker集群使用&#xff0c;一个域名配置https管理整个集群 lua做转发&#xff08;方向代理&#xff09; 1、ad_load.lua文件 ngx.header.content_typ…

银行数据仓库体系实践(1)--银行数据仓库简介

银行数据仓库简介 数据仓库之父比尔&#xff08;Bill Inmon&#xff09;在1991年出版的“Building the Data Warehouse”&#xff08;《建立数据仓库》&#xff09;一书中所提出的定义被广泛接受&#xff1a;数据仓库&#xff08;Data Warehouse&#xff09;是一个面向主题的&a…

机器学习之常用激活函数

人工神经网络中最基本的单元叫神经元,又叫感知器,它是模拟人脑神经系统的神经元(分析和记忆)、树突(感知)、轴突(传导)的工作原理,借助计算机的快速计算和存储来实现。它的主体结构如下: 激活函数常用类型有:线性激活函数、符号激活函数、Sigmoid激活函数、tanh激活…

使用arcgis pro是类似的控件样式 WPF

1.资源加载 <controls:ProWindow.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><extensions:DesignOnlyResourceDictionary Source"pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml&quo…

【问题+解决】axios/vue/element/echarts引入报错

缘由 笔者在html页面引用vue来快速实现页面&#xff1b;<head></head>中通过<script>src""></script>方法引入&#xff0c;开始引入&#xff0c;应用都是正常&#xff0c;后来用了也没问题&#xff1b;奇怪的是&#xff0c;前几天发现htm…

docker-compose和docker compose的区别

在docker实际使用中&#xff0c;经常会搭配Compose&#xff0c;用来定义和运行多个 Docker 容器。使用时会发现&#xff0c;有时候的指令是docker-compose&#xff0c;有时候是docker compose&#xff0c;下面给出解释。 docker官方文档&#xff1a;https://docs.docker.com/c…

flutter 客户端日志上传定位错误信息

背景 flutter 开发的app 安装到真机上 无法定位报错信息&#xff0c;只能使用usb连接电脑 使用adb logcat来查看日志效率低下。 想法 如果将flutter 开发的app 运行的时候 将日志写进一个日志文件里面去&#xff0c;然后给flutter app搭建一个http服务器&#xff0c;后端知道对…

Windows 11 系统 安装MySQL

Windows 11 系统 安装MySQL 1.下载2.安装3.配置4.环境变量5.检验 1.下载 网址&#xff1a;https://www.mysql.com/ 2.安装 3.配置 4.环境变量 在电脑上找到系统属性 C:\Program Files\MySQL\MySQL Server 8.0\bin5.检验 Win R 键 mysql -uroot -p

c++多态与虚函数

多态是什么&#xff1f; 多态&#xff08;Polymorphism&#xff09;是面向对象编程中的一个核心概念&#xff0c;它来源于希腊语&#xff0c;意为“多种形态”。 从字面意思理解&#xff0c;多态是指函数有多种形态&#xff08;实现&#xff09;。换句话说&#xff0c;运行阶段…

【项目实战】Postgresql数据库中出现锁表如何解决

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列专栏目录 [Java项目…

地震预测系统项目实现

整个项目思路即在一组观测数据中&#xff0c;地震专家&#xff08;即用户&#xff09;输入观测窗口的最小数量和最大数量&#xff0c;进行预测峰值点 数据文件如图所示&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include<fstream> #include<string> #include&…

IOS-高德地图SDK接入-Swift

申请key 这个要前往高德开发平台注册成为个人开发者然后在控制台创建一个应用&#xff1a; 高德开发平台 注册步骤就不写了&#xff0c;写一下创建应用的步骤&#xff1a; 1、点击应用管理——>我的应用 2、点击右上角的创建新应用 3、输入内容&#xff1a; 4、点击添加ke…

在全志T113-i平台上实现H.265视频解码步骤详解

H.265&#xff0c;也被称为HEVC(HighEfficiency Video Coding)&#xff0c;作为H.264的继任者&#xff0c;提供了更好的视频压缩和更高的视频质。H.265通过引入更多先进的编码技术&#xff0c;如更强大的运动估计和更高效的变换编码&#xff0c;对比H.264进行了改进。这些改进使…

设计大师的秘密武器:色彩搭配的奇妙技巧

在设计中&#xff0c;色彩搭配扮演着至关重要的角色。色彩搭配的选择和设计是设计师创作过程中不可或缺的一部分。本文将介绍色彩搭配的重要性&#xff0c;如何设计出令人惊叹的色彩搭配以及色彩对设计师的作用。 色彩卡 | 一个覆盖广泛主题工具的高效在线平台(amd794.com) h…