服务器渲染

news/2024/7/10 0:46:27 标签: vue, web

一、浏览器端渲染

CSR：是Client Side Render简称，页面上的内容是由js文件进行渲染的，js文件在浏览器上运行，服务器返回一个html模板

过程：

用户发送请求，返回页面，此时页面是一个模板页面，通过js解析，通过接口去读数据，利用模板进行渲染，注入网站内容，不便于爬取

二、服务器端渲染

SSR：是Server Side Render简称，页面有服务器渲染生成，浏览器直接进行显示

过程：

用户发送请求，后端先获取一些数据，通过其渲染引擎利用模板进行页面的渲染，渲染好之后由后端将注入好的数据放到页面结构中，将携带数据的完整的也面结构返回浏览器。

三、对比

客户端渲染可以减轻服务端的压力，达到前后端分离的开发，但对SEO优化不是很友好

服务器渲染对SEO优化特别好，但是对服务器性能要求严格，但不能实现前后端分离。

四、服务器端渲染过程

初始化项目环境

npm init -y
安装vue以及渲染包

npm i vue vue-server-renderer --save
更改为开发模式

在这里插入图片描述

编写 server.js 文件

在这里插入图片描述

运行检测是否正常

npm run dev

在这里插入图片描述

安装express模块

npm i express --save
修改 server.js 文件

// 引入vue
const Vue = require('vue');
// 引入express并调用
const server = require('express')();

// express响应
server.get('/',(req,res)=>{
    // 创建一个实例
    const app = new Vue({
        template: `<div>hello</div>`
    });

    // 创建一个渲染函数
    const renderer = require('vue-server-renderer').createRenderer();

    // 将vue实例渲染为html
    // renderer.renderToString(vue实例,(错误信息,渲染后的html)=>{})
    renderer.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>
        `);
    }).catch(err=>{
        console.log(err)
    })
})

// 监听端口
server.listen(8080)