07-node.js 客户端渲染与服务端渲染 以及 服务端渲染留言板（没有数据库，适合新手入门node服务器如何渲染页面）

这是我学习node的整理笔记。是我对各个视频和文档的综合理解，以备我日后复习存储。如果有错误的地方，还请各位大佬多多赐教

一、客户端渲染与服务端渲染

1、客户端渲染（SSR）

      html 仅仅作为静态文件，客户端端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端客户端，然后根据 html 上的 JavaScript，生成 DOM 插入 html。

2、服务单渲染（CSR）

      服务端在返回 html 之前，在特定的区域，符号里用数据填充，再给客户端，客户端只负责解析 HTML，在服务端生成DOM树 。

注意：浏览器收到 HTML 响应内容之后，就要开始从上到下依次解析， 当在解析的过程中，如果发现：
       link
       script
       img
       iframe
       video
       audio
等带有 src 或者 href（link） 属性标签（具有外链的资源）的时候，浏览器会自动对这些资源发起新的请求。

3、客户端渲染（SSR）与服务单渲染（CSR）的区别

3.1、服务端渲染和客户端渲染的区别：

      1、二者本质的区别：是谁来完成了html的完整拼接，服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。

      2、响应速度：服务端渲染会加快页面的响应速度，客户端渲染页面的响应速度慢。

      3、SEO优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息，客户端渲染不利于SEO优化。

      4、开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。

应该使用服务端渲染还是客户端渲染：

3.2、如何选择服务端渲染和客户端渲染

      如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。

      如果是后台管理页面，交互性很强，它不需要考虑到SEO，那我们应该使用客户端渲染。

      具体使用哪种渲染方式也不是绝对的，现在很多网站使用服务端渲染和客户端渲染结合的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。

二、服务端渲染留言板

第一步：完成静态页面并渲染到服务器上

完整的项目下载地址，里面有写好的静态页面，node安装运行的教程地址
我的目录如下：

//1、加载核心模块 fs、http
var fs = require('fs');
var http = require('http');

//2、实例化server
var server = http.createServer();

//3、向客户端请求数据并相应
server.on('request', function(req, res) {
   

    //3.1判断路径
    var url = req.url;
    if (url === '/') {
   
        //3.2读取页面并渲染
        fs.readFile('./views/index.html', function(error, data) {
   
            if (error) {
   
                //处理中文乱码
                res.setHeader('Content-Type', 'text/plain; charset=utf8');
                return res.end("文件读取错误，请刷新重试~");
            }
            //不需要处理乱码，因为html中有utf8
            res.end(data)
        })


    } else {
   
        res.end("404 Not Found");
    }
})

//4、绑定端口号,启动服务器
server.listen(3000, function() {
   
    console.log("服务器启动成功了~");
})

第二步：服务器渲染处理静态页面中的link、src等资源

      我们为了方便的统一处理这些静态资源，所以我们约定把所有的静态资源都存放在 public 目录中。哪些资源能被用户访问，哪些资源不能被用户访问，我现在可以通过代码来进行非常灵活的控制。

注意：在服务端中，文件中的路径就不要写相对路径了。因为这个时候所有的资源都是通过 url 标识来获取的。 我的服务器开放了/public/目录。 所以这里的请求路径都写成：/public/xxx，/在这里就是 url 根路径的意思。 浏览器在真正发请求的时候会最终把 http://127.0.0.1:3000 拼上。 不要再想文件路径了，把所有的路径都想象成 url 地址。
如下的前端路径：

<link rel="stylesheet" href="/public/css/bootstrap.css">

//服务端渲染，讲public开放
var fs = require('fs');
var http = require('http');


var server = http.createServer();

server.on('request', function(req, res) {
   


    var url = req.url;
    if (url === '/') {
   
        fs.readFile('./views/index.html', function(error, data) {
   
            if (error) {
   
                res.setHeader('Content-Type', 'text/plain; charset=utf8');
                return res.end("文件读取错误，请刷新重试~");
            }

            res.end(data)
        })

        //5、处理公共开放的资源
    } else if (url.indexOf('/public/') === 0) {
   
        console.log(url)