提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

前端学习 node 快速入门 系列 —— 服务端渲染

2023-02-18 16:38:09 时间

其他章节请看：

前端学习 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 快速入门 系列

相关文章