从vue项目简单了解什么是SSR

SSR

vue是单页应用，创建的项目不利于SEO爬虫，因为SEO爬虫是爬网页的源代码，而vue创建的项目是通过js的解析来生成的页面。SSR就是通过在服务器端将vue生成的页面数据渲染完成后，形成完整的html页面以后再传给浏览器，此时SEO就可以爬虫其中的内容，同时也减少了浏览器向服务器发起的请求数。

从0到1开始

初始化项目

npm init

server.js

npm i express vue

根目录下创建服务器文件 server.js

// server.js
const { createApp } = require('vue') // Vue3
const { renderToString } = require('@vue/server-renderer')
const server = require('express')()

server.get('/', (req, res) => {
  // 跟请求发起时创立 vue 实例并返回 html 页面
  const app = createApp({
    data() {
      return {
        title: 'Vue + Nuxt'
      }
    },
    template: `
Hello {{title}} !`
  })

  renderToString(app).then(html => {
    res.send(html)
  })
})

server.listen(3000, () => {
  console.log('项目运行在 '+ 'http://localhost:3000')
})

修改命令语句

// package.json
"dev": "nodemon ./server.js"

需要全局安装 nodemon：npm i -g nodemon，作用其实就是相当于 node ，只是不需要在修改了内容以后重新启动服务生效

浏览器运行 http://localhost:3000

查看网页源代码，发现内容缺少了基本结构。

// server.js
...
renderToString(app).then(html => {
  res.send(
    `
    
    
      
      
      
      
    
    
      ${html}
    
    `
  )
})
...

此时再查看网页源代码