其他章节请看：

前端学习 node 快速入门 系列

服务端渲染

在简易版 Apache一文中，我们用 node 做了一个简单的服务器，能提供静态资源访问的能力。

对于真正的网站，页面中的数据应该来自服务器（服务器查询数据库），我们来模拟一下。请看示例：

- demo

    - node_modules                  // 安装 art-template 后自动生成

    - public

        - lib

            - art-template          // 将 node_modules/art-template 拷贝过来即可

        - view

            - client-render.html    // 页面内容采用客户端渲染

            - server-render.html    // 页面内容采用服务端渲染

    - index.js                      // 入口文件

    - package.json                  // 只依赖于 art-template

注：如果不明白 node_modules、package.json，可以看我的另外一篇文章（npm）

client-render.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src='/public/lib/art-template/lib/template-web.js'></script>

</head>

<body>

   <h2>客户端渲染</h2>

   <div id="content"></div>

    <script id="test" type="text/html">

        <p>{{title}}</p>

        <ul>

        {{each list as value i}}

            <li>索引 {{i + 1}} ：{{value}}</li>

        {{/each}}

        </ul>

    </script>

    <script>

        var data = {

            title: '标签',

            list: ['文艺', '博客', '摄影']

        };

        // 前端使用模板引擎

        var html = template('test', data);

        document.getElementById('content').innerHTML = html;

    </script>

</body>

</html>

server-render.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h2>服务端渲染</h2>

    <p>{{title}}</p>

    <ul>

    {{each list as value i}}

        <li>索引 {{i + 1}} ：{{value}}</li>

    {{/each}}

    </ul>

</body>

</html>

index.js：

const http = require('http')

const fs = require('fs')

const template = require('art-template')

const server = http.createServer()

const requestListener = (req, res) => {

    let url = req.url

    // 客户端渲染

    if(url.endsWith('client-render.html')){

        fs.readFile('./public/view/' + url, (err, data) => {

            if (err) throw err;

            res.end(data)

        });

        return

    }

    // 服务端渲染

    if(url.endsWith('server-render.html')){

        fs.readFile('./public/view/' + url, (err, data) => {

            if (err) throw err;

            // 服务端使用模板引擎

            const ret = template.render(data.toString(), {

                title: '标签',

                list: ['文艺', '博客', '摄影']

            });

            res.end(ret)

        });

        return

    }

    fs.readFile('.' + url, (err, data) => {

        if (err) {

            res.writeHead(404, {'Content-type':'text/html;charset=utf8'})

            res.end('没有找到对应的资源')

        }

        res.end(data)

    })

}

server.on('request', requestListener)

server.listen('3000', () => {

    console.log('服务器已启动')

})

启动服务器：

$ node index

访问：

1. 浏览器输入 http://localhost:3000/server-render.html

页面显示：<是有样式的>

服务端渲染

标签

索引 1 ：文艺

索引 2 ：博客

索引 3 ：摄影

2. 浏览器输入 http://localhost:3000/client-render.html

页面显示：<与 server-render.html 相同>

虽然两个页面看起来相同，但一个是客户端渲染，一个是服务端渲染。

Tip：模板引擎是为了使用户界面和业务数据分离而产生的，它可以生成特定格式的文档。模板引擎最初出现在服务端。

这里使用的模板引擎是 art-template。模板引擎应用在客户端就是客户端渲染；模板引擎应用在服务端就是服务端渲染。更直观的区分，如果源码（浏览器快捷键：ctrl+u）中可以找到前端页面的文字，则说明是服务端渲染，否则是客户端渲染。

注：网站通常既有客户端渲染，也有服务端渲染。例如当当网、京东这类电商网站，商品通常使用服务端渲染，因为商品需要被搜索引擎看见；而评论、试读则会使用客户端渲染。

其他章节请看：

前端学习 node 快速入门 系列

前端学习 node 快速入门 系列 —— 服务端渲染的更多相关文章

  1. 前端学习 node 快速入门 系列 —— 初步认识 node

    其他章节请看: 前端学习 node 快速入门 系列 初步认识 node node 是什么 node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境.不是一门语言. 以 ...

  2. 前端学习 node 快速入门 系列 —— 简易版 Apache

    其他章节请看: 前端学习 node 快速入门 系列 简易版 Apache 我们用 node 来实现一个简易版的 Apache:提供静态资源访问的能力. 实现 直接上代码. - demo - stati ...

  3. 前端学习 node 快速入门 系列 —— 报名系统 - [express]

    其他章节请看: 前端学习 node 快速入门 系列 报名系统 - [express] 最简单的报名系统: 只有两个页面 人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到 ...

  4. 前端学习 node 快速入门 系列 —— npm

    其他章节请看: 前端学习 node 快速入门 系列 npm npm 是什么 npm 是 node 的包管理器,绝大多数 javascript 相关的包都放在 npm 上. 所谓包,就是别人提供出来供他 ...

  5. 前端学习 node 快速入门 系列 —— 模块（module）

    其他章节请看: 前端学习 node 快速入门 系列 模块(module) 模块的导入 核心模块 在 初步认识 node 这篇文章中,我们在读文件的例子中用到了 require('fs'),在写最简单的 ...

  6. 前端用node+mysql实现简单服务端

    node express + mysql实现简单服务端前端新人想写服务端不想学PHP等后端语言怎么办,那就用js写后台吧!这也是我这个前端新人的学习成果分享,如有那些地方不对,请给我指出. 1.准备工 ...

  7. Vue.js与 ASP.NET Core 服务端渲染功能整合

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  8. NET Core 与 Vue.js 服务端渲染

    NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...

  9. vue服务端渲染之nuxtjs

    前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...

随机推荐

  1. 利用windows api共享内存通讯

    主要涉及CreateFile,CreateFileMapping,GetLastError,MapViewOfFile,sprintf,OpenFileMapping,CreateProcess Cr ...

  2. Java中的变量之成员变量、本地变量与类变量

    Java中的变量: 1.成员变量(实例变量,属性) 2.本地变量(局部变量) 3.类变量(静态属性) 一.成员变量(实例变量,属性) 1.1-成员变量:(在类中定义,    访问修饰符   修饰符   ...

  3. 洛谷p1966 火柴排队 （逆序对变形，目标排序

    题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为: ∑(ai-bi)^2 其中 ai 表示 ...

  4. ZOJ 3494 BCD Code（AC自动机 + 数位DP）题解

    题意:每位十进制数都能转化为4位二进制数,比如9是1001,127是 000100100111,现在问你,在L到R(R <= $10^{200}$)范围内,有多少数字的二进制表达式不包含模式串. ...

  5. SQL优化这么做就对了

    目录 前言 SQL优化一般步骤 1.通过慢查日志等定位那些执行效率较低的SQL语句 2.explain 分析SQL的执行计划 3.show profile 分析 4.trace 5.确定问题并采用相应 ...

  6. javascript module system all in one

    javascript module system all in one AMD & CMD https://github.com/amdjs/amdjs-api/wiki/AMD http:/ ...

  7. .NET & C# & ASP.NET

    .NET && C# && ASP.NET https://docs.microsoft.com/zh-cn/dotnet/ .NET Documentation We ...

  8. 找出 int 数组的平衡点 & 二叉树 / 平衡二叉树 / 满二叉树 / 完全二叉树 / 二叉查找树

    找出 int 数组的平衡点 左右两边和相等, 若存在返回平衡点的值(可能由多个); 若不存在返回 -1; ``java int [] arr = {2,3,4,2,4}; ```js const ar ...

  9. project config generator

    project config generator React, Vue, https://createapp.dev/ parcel https://parceljs.org/ https://git ...

  10. PAUL ADAMS ARCHITECT：华州加州城市楼市竞争力居全美前列

    美国房地产公司最新一份报告显示,美国楼市竞争力最高的十个城市中有八个来自华盛顿州和加利福尼亚州,主要原因在于越来越多的买家考虑迁居房价更划算的都会区.数据显示,斯潘那维65%的房屋以高于要价的价格售出 ...