从根源上了解SSR

时间 2019-11-08

标签根源了解 ssr 繁體版

原文原文链接

首先了解一下SSR是什么

客户端渲染：浏览器加载js文件后，经过js的执行补充页面内容。javascript

此处以vue为例做为演示。html

咱们新建一个vue项目，运行并打开项目，查看网页源代码vue

<html>
        <head>
            ...
        </head>
        <body>
        <noscript>
            ...
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
        <script type="text/javascript" src="/js/chunk-vendors.js"></script>
        <script type="text/javascript" src="/js/app.js"></script>
        </body>
    </html>
复制代码

能够发现，浏览器获得的body标签中并无咱们想要展现的内容，其实页面的内容是经过js代码的执行来加载的，而对于服务器来说并无html文件，只是一个对应HTML内容的字符串而已，因此爬虫是不会加载和执行js代码的，这对SEO很不友好java

服务端渲染：服务器在返回html前，对html字符串进行处理，使返回的内容包含SEO所需内容，这样爬虫就能够爬取到咱们页面中的内容了。node

此处以nodejs为例解析服务器返回页面的过程api

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>SSR解析</title>
    </head>
    <body>
        <div>姓名：苦舟</div>
    </body>
</html>
复制代码

// index.js
// 此处引入node核心模块，如不理解请参阅相关文档
const http = require('http');
const fs = require('fs');
const server = http.createServer();

server.on('request', (res, req) => {
    // 读取index.html获得相关信息，对应api可参阅https://nodejs.org/dist/latest-v10.x/docs/api/fs.html
    fs.readFile('./index.html', (error, data) => {
        if (error) {
            req.end('server error');
            return;
        }
        const html = data.toString();
        req.end(html);
    })
})

server.listen(3000);
复制代码

使用node运行index.js并访问http://127.0.0.1:3000可获得以下结果浏览器

到这里咱们已经能够经过url访问到index.html，不过只是静态页面，接下来咱们为它添加动态数据服务器

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 这里咱们采用{{}}做为演示 -->
        <title>{{title}}</title>
    </head>
    <body>
        <div>姓名：{{name}}</div>
        <div>年龄：{{age}}</div>
    </body>
</html>
复制代码

此时访问http://127.0.0.1:3000将获得以下结果app

咱们看到浏览器原样解析了咱们的代码，因此咱们要在服务器返回html字符串以前对html字符串进行处理，使之成为咱们想要的内容ui

// index.js
// 此处引入node核心模块，如不理解请参阅相关文档
const http = require('http');
const fs = require('fs');
const server = http.createServer();

server.on('request', (res, req) => {
    // 读取index.html获得相关信息，对应api可参阅https://nodejs.org/dist/latest-v10.x/docs/api/fs.html
    fs.readFile('./index.html', (error, data) => {
        if (error) {
            req.end('server error');
            return;
        }
        // 要对值进行设置 cont -> let
        let html = data.toString();
        const info = {
            title: '了解SSR原理',
            name: '苦舟',
            age: 18
        }
        html = html.replace(`{{title}}`, info.title).replace(`{{name}}`, info.name).replace(`{{age}}`, info.age);
        req.end(html);
    })
})

server.listen(3000);
复制代码

重启node并刷新浏览器，此时浏览器显示内容

到这里咱们已经对服务端渲染有了必定的了解。小白第一次发文章，很激动，很紧张，可能写的并非很清晰，望谅解，如发现错误，请各位大神指出，我会在看到的第一时间改正，以避免误导你们。