【大前端】Vuex 数据流管理及Vue.js 服务端渲染（SSR）

最新推荐文章于 2022-11-28 20:21:35 发布

Daisy__yangyang

最新推荐文章于 2022-11-28 20:21:35 发布

阅读量234

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_37883657/article/details/112478762

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

概述

SPA 单页面应用

优点
- 用户体验好
- 开发效率高
- 渲染性能好
- 可维护性好
缺点
- 首屏渲染时间长
- 不利于 SEO

什么是渲染

渲染：把【数据】+ 【模板】拼接到一起

传统的服务端渲染

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <h2>{{ title }}</h2>
    {{ each posts }}
    <ul>
        <li>{{ $value.title }}</li>
    </ul>
    {{ /each }}
</body>
</html>

{
    "posts":[
        {
            "id":1,
            "title":"拉钩教育1",
            "body":"222222"
        },
        {
            "id":2,
            "title":"拉钩教育2",
            "body":"333333"
        }
    ],
    "title":"拉钩教育1"
}

const express = require('express')
const fs = require('fs')
const template = require('art-template')

const app = express()

app.get('/', (req, res) => {
    //1.获取页面模板
    const templateStr = fs.readFileSync('./index.html', 'utf-8')
    //2.获取数据
    const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
    //3.渲染：数据 + 模板 = 最终结果
    const html = template.render(templateStr, data)
    //4.把渲染结果发送给客户端
    res.send(html)
})

app.listen(3000, () => console.log('running...'))

缺点（随着网页越来越复杂，存在很多不足）
- 前后端代码完全耦合在一起，不利于开发和维护
- 前端没有足够发挥空间
- 服务端压力大
- 用户体验一般

客户端激活为 SPA（CSR）

优点
- 【前端】更为独立，不在受制于【后端】
- 服务端的压力减小，数据渲染放在客户端
- 用户体验好
缺点
- 首屏渲染慢
  - 传统的服务端渲染是页面直出，返回来的直接是结果，不用再执行 js和发请求
  - 客户端渲染最起码要经历三次的 http 请求周期，死一次是页面的请求，第二次是js的请求，第三次是动态数据请求
- 不利于 SEO
  - 传统服务端的内容会全部返回
  - 客户端渲染的页面不会解析 js，没内容

// 代码测试

app.listen(3000, () => console.log('running...'))

// 搜素引擎是怎么获取网页内容的
const http = require('http')

//  通过程序获取指定的网页内容
http.get('http://localhost:3000/', res =>{
    let data = ''
    res.on('data', chunk => {
        data += chunk
    })
    res.on('end', () => {
        console.log(data)
    })
})

同构应用 = 后端渲染 + 前端渲染（现代化的服务端渲染）

通过服务端渲染首屏直出，解决 SPA 应用首屏渲染慢以及不利于SEO问题
通过客户端渲染接管页面内容交互得到更好的用户体验
这种方式通常称之为现代化的服务端渲染，也叫同构渲染
拥有传统服务端渲染的优点，也有客户端渲染的优点

如何实现同构渲染

使用 Vue、 React 等框架的官方解决方案
- 优点：有助于理解原理
- 缺点：需要搭建环境，比较麻烦
使用第三方解决方案
- React 生态的 Next.js
- Vue 生态的 Nuxt.js

通过 Nuxt 体验同构渲染

同构渲染上手操作：

创建 pages-demo 目录
npm init 初始化项目
npm install 安装依赖，安装 axios 和 nuxt
修改 packjson.json 中的 scripts 属性 "dev": "nuxt"
启动项目 npm run dev, 打开 http://localhost:3000/
创建 page 目录，可以在里面新建 index.vue

新建 layouts 文件夹，新建 default.vue 这是路由的入口（名字是固定的）

同构渲染应用的问题

开发条件所限
- 浏览器特定的代码只能在某些生命周期钩子函数中使用
- 一些外部扩展库可能需要特殊处理才能在服务端渲染中应用中运行
- 不能在服务端渲染器件操作DOM
- 某些代码操作需要区分运行环境
涉及构建设置和部署的更多要求
更多的服务器端负载
- 在 Node 中渲染完整的应用程序，相比仅仅提供静态文件的服务器需要大量占用 CPU 资源
- 如果应用在高流量环境下使用，需要准备相应的服务器负载
- 需要更多的服务端渲染优化工作处理

服务端渲染使用建议

首屏渲染速度是否真的重要？
是否真的需求 SEO？

Daisy__yangyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【大前端】Vuex 数据流管理及Vue.js 服务端渲染（SSR）

概述SPA 单页面应用优点用户体验好开发效率高渲染性能好可维护性好缺点首屏渲染时间长不利于 SEO 什么是渲染渲染：把【数据】+ 【模板】拼接到一起传统的服务端渲染代码展示 <!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compat...
复制链接

扫一扫

专栏目录