node+ejs实现服务端渲染SSR

最新推荐文章于 2024-08-16 15:20:02 发布

小包同学666

最新推荐文章于 2024-08-16 15:20:02 发布

阅读量1.1k

点赞数

分类专栏： nodejs 文章标签： nodejs

本文链接：https://blog.csdn.net/cream66/article/details/105550735

版权

nodejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、服务端渲染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和content
    var 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和content
        var 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/');