SSR的应用场景

1.SEO需求

SEO（Search Engine Optimization，搜索引擎优化），是一种利用搜索引擎规则，提高网站在搜索引擎内自然排名的技术。通常这需要页面内容在页面加载完成时便已经存在。

前后端分离的纯前端项目，由于这类项目需要页面加载完成后再异步获取数据渲染，因此大部分搜索引擎无法获取到这类项目的内容。Vue SSR正是基于此类需求而给出的一种技术方案。利用nodejs搭建页面渲染服务，在服务端完成之前需要在客户端完成的页面渲染工作，输出给SEO更友好的页面。

2.首屏渲染速度

目前对于首屏渲染速度的提升有许多方案，在ssr之外还有龙骨，墓碑，数据直出。相比于这些方案ssr方案实现是最复杂的，但效果也是最好的。

实现方案

Vue SSR的实现有两种实现

1.基于官方Vue SSR指南文档的官方方案

更直接的控制应用程序的结构，更深入底层，更加灵活

2.vue.js通用应用框架–NUXT

平滑的开箱即用的体验，它建立在同等的Vue技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过NUXT可以根据约定的规则，快速的实现Vue SSR

步骤 代码

新建文件夹 ssr ，创建ssr demo项目，终端输入：
mkdir ssr-demo
cd ssr-demo 初始化文件夹：npm init -y 安装依赖：
vue、vue-server-renderer： npm i vue vue-server-renderer nodemon --save
（npm install express --save）
（npm install vue-router --save）
其中vue-server-renderer尤为关键，我们实现的vue-ssr依靠于这个库提供的API；vue用于创建vue实例；vue-router则用于实现路由控制；express使我们node端的框架。 修改package.json文件：

text
1 2 3 4 5 6 
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "server": "node index.js",
   "dev": "nodemon ./server.js"
  },

根目录新建server.js， 搭建node服务：touch server.js 修改server.js中代码

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 
// ① 引入express，express()
const server = require('express')()
// 1. 引入vue
const Vue = require('vue')

// ② server.get('/',(req, res) => {})
server.get('/', (req, res) => {
 const app = new Vue({
   template: `<div>hello SSR !</div>`,
 })

 // 2. 使用vue-server-renderer的createRenderer，创建renderer
 const renderer = require('vue-server-renderer').createRenderer()

 // 3. renderer.toString(vue实例).then(html => {}).catch(err => {console.log(err)})
 renderer
   .renderToString(app)
   .then((html) => {
    console.log(html)
    res.end(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />AaA
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Document</title>
      </head>
      <body>${html}</body>
    </html>
`)
   })
   .catch((err) => {
    console.log(err)
   })
})

// ③ server监听3001端口
server.listen(3001, () => {
 console.log('http://localhost:3001')
})
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 
// 1. 引入vue
const Vue = require('vue')
const app = new Vue({
 template: `<div>hello SSR !</div>`,
})

// 2. 使用vue-server-renderer的createRenderer，创建renderer
const renderer = require('vue-server-renderer').createRenderer()

// 3. renderer.toString(vue实例).then(html => {}).catch(err => {console.log(err)})
renderer
 .renderToString(app)
 .then((html) => {
   console.log(html)
 })
 .catch((err) => {
   console.log(err)
 })

运行命令：npm run dev

从零开始搭建一个vue-ssr（上）
https://segmentfault.com/a/1190000019618170

原文地址：https://blog.csdn.net/qq_40407998/article/details/123633815?ops_request_misc%3D%25257B%252522request%25255Fid%252522%25253A%252522168912040216800227411767%252522%25252C%252522scm%252522%25253A%25252220140713.130102334.pc%25255Fblog.%252522%25257D%26request_id%3D168912040216800227411767%26biz_id%3D0%26utm_medium%3Ddistribute.pc_search_result.none-task-blog-2%7Eblog%7Efirst_rank_ecpm_v1%7Erank_v31_ecpm-12-123633815-null-null.142%5Ev88%5Econtrol%2C239%5Ev2%5Einsert_chatgpt%26utm_term%3Dvue