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

土豆Coder

已于 2022-09-16 14:47:54 修改

阅读量975

点赞数

分类专栏： ssr 文章标签： npm 前端 node.js

于 2022-07-01 11:21:08 首次发布

本文链接：https://blog.csdn.net/weixin_43443341/article/details/125554836

版权

ssr 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

SSR
从0到1开始
- 初始化项目
- server.js

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: `<div>Hello {{title}} !</div>`
  })

  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(
    `<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      ${html}
    </body>
    </html>`
  )
})
...

此时再查看网页源代码

在这里插入图片描述

土豆Coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从vue项目简单了解什么是SSR

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

扫一扫