從根源上了解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並刷新瀏覽器，此時瀏覽器顯示內容

到這裏咱們已經對服務端渲染有了必定的瞭解。小白第一次發文章，很激動，很緊張，可能寫的並非很清晰，望諒解，如發現錯誤，請各位大神指出，我會在看到的第一時間改正，以避免誤導你們。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。