服务端渲染SSR

服务端渲染SSR

• 什么叫服务端渲染?

通常情况下，用户请求网页，都是后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的 html 页面，再直接返回给浏览器，以便用户浏览。
然而，也可以将渲染为服务器端的 html 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。这种方式就称之为***服务端渲染***

• 服务端渲染的优势:

1> 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
2> 更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。

• 服务端渲染的劣势:

1> 涉及构建设置和部署的更多要求。
2> 更多的服务器端负载

下面以VUE为例,将进一步演示一下,服务端渲染:

• 安装

npm install vue vue-server-renderer --save

• 渲染一个VUE实例

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')

const app = new Vue({
  data: {
    name: 'Jack'
  },
  template: `
Hello {{ name }}
`
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => 
Hello World
})

运行结果:

• 与服务器集成

需要安装express,

npm install express --save

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `
访问的 URL 是： {{ url }}
`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })
    res.end(`
      
      
        
        ${html}
      
    `)
  })
})

server.listen(8080)

使用node运行此文件,然后在浏览器端访问

• 服务端也是可以发送请求

需要安装axios,

npm install axios --save

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
const axios = require('axios')

server.get('*', async (req, res) => {
  const postsRes = await axios({
    url: 'http://jsonplaceholder.typicode.com/posts'// json线上测试数据地址
  })
  console.log(postsRes)
  const app = new Vue({
    data: {
      url: req.url,
      posts: postsRes.data
    },
    template: `
      

        
访问的 URL 是： {{ url }}
        

          
标题：{{ item.title }}
        
      
    `
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })
    res.end(`
      
      
        
        ${html}
      
    `)
  })
})

server.listen(8080)

运行结果,如图下:

就先写到这儿吧~