服务端渲染

在提到服务端渲染之前，我们先来看一下客户端渲染的概念：

客户端渲染就是向服务端发送请求获取数据后，通过JS生成DOM插入到html中，最终渲染到浏览器上。

客户端渲染有两个特点：

DOM是由js生成的
在浏览器中查看不到完整的源码，都是通过js，css外部引入的文件

这就会导致一个问题，刚开始渲染页面的时候是空白的，这时候js还没有加载进来，这也就是传说中的首页白屏。

因此为了提高首页的渲染效率，服务端渲染又获得了重新登上舞台的机会，因为以前前后端没有分离的时候，其实用的基本上都是服务端渲染。

服务端渲染就是服务器实现HTML的拼接，然后将HTML发送给浏览器，浏览器解析HTML并渲染页面。

服务端渲染的最大的优点就是更快地渲染页面，并且有更好的SEO。

1. 实现一个服务端渲染的小例子。

服务端渲染离不开我们前面所介绍的Express框架。

const express = require("express");
const app = express();

app.get('/', (req, res) => {
  res.send(
    `	
    <html>	
      <head>	
        <title>服务端渲染</title>	
      </head>	
      <body>	
        <h1>开始服务端渲染之旅了</h1>	
      </body>	
    </html>	
  `
  )
})

app.listen(3000);

效果如下：

2. ejs的用法

这篇文章不会深入介绍服务端渲染。在了解了简单的服务端渲染之后，我们来看一个服务端渲染的模板引擎ejs.

EJS 是一个高效的 Javascript 的模板引擎

安装ejs

安装命令如下:

npm i ejs --save

ejs的基本使用

// 引入ejs
const ejs = require('ejs');
let arr = [1, 2, 3, 4, 5, 6];
let html = ejs.render('<%= arr.join(",") %>', {arr: arr});
console.log(html);

效果如下：

ejs.语法

ejs一共有以下几种语法形式：

<% xxx %>：里面写入的是js语法
<%= xxx %>：里面是服务端发送给ejs模板转义后的变量，输出为原数据
<%- xxx %>：里面也是服务端发送给ejs模板后的变量，解析html 如果写html的注释，那样会在源码中显示，下面这种ejs注释不会在源码中显示
<%# 注释标签，不执行、不输出内容 %>

// index.ejs
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <% for(var i=0;i<10;i++){ %>
            <%= i %>
        <% } %>
        <div class="datas">
            <p>获取变量：</p>
            <%- title %>
            <%= title %>
        </div>
    </body>
</html>

const express = require("express");
const app = express();
const path = require('path');

// 设置模板引擎
app.set('express', path.resolve(__dirname, './express'));

app.get('/index', (req, res) => {
  let title = '我是ejs模板引擎';
  res.render('index', {title});
})

app.listen(3000);

ejs标签的含义

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

导入公共模板

有时候会为很多页面创建一个公共模板，这点类似于我们在vue中的公共组件。那么如何引入公共模板呢？

首先创建一个公共模板

// title.ejs
<div>
  我是公共模板
  <div>
    <% if(isShow) {%>
    <h1>张三</h1>
    <% } %>
  </div>
</div>

在另外的模板中引入公共模板

// index.ejs
<%- include("./title.ejs",{ isShow:true }) %>

node.js之EJS服务端渲染