node+ejs实现服务端渲染SSR

一、服务端渲染SSR

1.什么是客户端渲染和服务端渲染？

客户端渲染：客户端向服务端请求HTML页面，后端不返回完整的 HTML页面，浏览器解析HTML页面过程中如果遇到ajax数据请求，会向服务端请求数据，拿到数据后进行HTML的拼接，然后在浏览器上完整的展示出来；这样前端可以专注于UI开发，后端专注于逻辑实现，实现了前后端的分离。

服务端渲染：与客户端渲染不同，服务端把HTML页面拼接好后，直接给客户端返回一个完整的HTML文件，服务端只需要负责解析然后展示出来。

2.服务端渲染的利弊

优点：

首屏渲染快，服务器只负责解析HTML，不需要多次请求数据；
有利于SEO，因为在后端有完整的html页面，所以爬虫更容易爬取信息。

缺点：

不利于前后端分离，对于复杂的项目开发效率低。
如果请求较多，会对服务器造成一定的访问压力。

二、ejs介绍

参考官方文档

1.什么是ejs？

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

2.ejs有什么特点？

快速编译与绘制输出
简洁的模板标签：<% %>
自定义分割符（例如：用 <? ?> 替换 <% %>）
引入模板片段
同时支持服务器端和浏览器 JS 环境
JavaScript 中间结果静态缓存
模板静态缓存
兼容 Express 视图系统

3.标签含义

<% ‘脚本’ 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 ‘<%’
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

4.用法

let template = ejs.compile(str, options);
template(data);
// => 输出渲染后的 HTML 字符串ejs.render(str, data, options);
// => 输出渲染后的 HTML 字符串ejs.renderFile(filename, data, options, function(err, str){// str => 输出渲染后的 HTML 字符串
});

三、node+ejs实现服务端渲染

1.利用npm安装ejs

npm install ejs

2.新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>header {width: 400px;text-align: center;padding: 10px 0;background: #f0f0f0;}main {margin-left: 20px;color: red;}</style><title>ejs实现服务端渲染</title>
</head>
<body><div><header><%= index %></header><main><%= content %></main></div>
</body>
</html>

3.新建ejs_renderFile.js文件

const http = require("http");
// 引入ejs模块
const ejs = require("ejs");http.createServer((request, response) => {// 设置响应类型为html文件response.writeHead(200, { 'Content-Type': 'text/html' });// 需要读取的文件var filename = './index.html'// 设置html文件中ejs变量的数据，data的属性分别对应ejs中的index和contentvar data = { index: '首页', content: '使用ejs.renderFile读取文件' };// renderFile方法直接渲染文件ejs.renderFile(filename, data, (err, data) => {if (err) {console.log(err);} else {// 返回渲染结果            response.end(data);}})
}).listen(3000);// 可在本地的3000端口访问页面
console.log('Server running at http://127.0.0.1:3000/');

4.用node命令运行ejs_renderFile.js

5.访问http://127.0.0.1:3000/可以在Network中看到文件被服务端渲染

6.另外，我们还可以使用ejs.render语法实现

ejs_render.js

const http = require("http");
const fs = require("fs");
// 引入ejs
const ejs = require("ejs");http.createServer(function (request, response) {// 设置响应类型为html文件response.writeHead(200, { 'Content-Type': 'text/html' });// 读取index.html页面的数据fs.readFile('./index.html', function (err, data) {// 把html文件内容转化成字符串,供ejs渲染var str = data.toString();// 设置html文件中ejs变量的数据，data的属性分别对应ejs中的index和contentvar data = { index: '首页', content: '使用ejs.render读取字符串' };// render渲染var result = ejs.render(str, data);// 返回结果response.end(result);})
}).listen(3001);// 可在本地的3001端口访问页面
console.log('Server running at http://127.0.0.1:3001/');

node+ejs实现服务端渲染SSR相关推荐

React + Koa 实现服务端渲染(SSR)
⚛️React是目前前端社区最流行的UI库之一,它的基于组件化的开发方式极大地提升了前端开发体验,React通过拆分一个大的应用至一个个小的组件,来使得我们的代码更加的可被重用,以及获得更好的可维护性 ...
服务端渲染SSR的理解
服务端渲染SSR的理解 SSR服务端渲染Server Side Render就是当进行请求时,页面上的内容是通过服务端渲染生成的,浏览器直接显示服务端返回的HTML即可. 客户端渲染CSR 通常在构建 ...
服务端渲染(SSR) 通用技术解决方案
项目背景服务端渲染(SSR) 通用技术解决方案的诞生来源于对 360搜索百科移动端项目的一次重构实践.而当时决定重构该项目的主要原因有以下几点: 1. 技术栈陈旧,熟悉.开发以及维护成本都较高项 ...
服务端渲染SSR与客户端渲染
文章目录一.服务端渲染和客户端渲染的区别服务端渲染(SSR -- server side render) 客户端渲染二.使用服务端渲染(SSR)的利弊优势局限三.实际应用应用原则举例 ...
vue服务端渲染ssr
vue服务端渲染ssr 一.SSR概念传统web渲染技术 SPA SSR 二.webpack+vue2的实现方式 1.创建工程 2.安装依赖 3.编写一个简单的SSR 4.完整的ssr 5.代码链接 ...
服务端渲染(SSR)和Nuxt.js
服务端渲染(SSR) 客户端渲染和传统服务端渲染的问题 SPA应用有两个非常明显的问题: 首屏渲染慢不利于 SEO 传统的服务端渲染又存在: 应用的前后端部分完全耦合在一起,在前后端协同开发方面会有 ...
vue服务端转html,普通vue-cli初始项目转为服务端渲染SSR
1.第一步没啥好说的,利用vue-cli脚手架创建一个demo项目: vue init webpack vue-ssr-demo cd vue-ssr-demo npm install 2.安装SSR ...
使用Node搭建reactSSR服务端渲染架构
如题:本文所讲架构主要用到技术栈有:Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs, log4js, scss,echarts, ...
Angular 服务端渲染(SSR) 学习笔记
文章目录 1 服务器端渲染 (SSR) 2 SSR的利弊 2.1 SSR的优势 2.2 SSR的局限 3 Angular Universal 3.1 Node.js Express web serve ...