前端学习 node 快速入门 系列 —— 服务端渲染
前端学习 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> <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> <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）中可以找到前端页面的文字，则说明是服务端渲染，否则是客户端渲染。
注：网站通常既有客户端渲染，也有服务端渲染。例如当当网、京东这类电商网站，商品通常使用服务端渲染，因为商品需要被搜索引擎看见；而评论、试读则会使用客户端渲染。