了解 Vue SSR 这一篇足以

文章目录

    • 1 - 什么是服务器端渲染？
      • 1.1 新建server文件夹
      • 1.2 生成一个node项目
      • 1.3 安装express
      • 1.4 服务端渲染小案例
      • 1.5 运行查看效果
      • 1.6 打开浏览器
      • 1.7 右键查看源代码
    • 2 - 什么是客户端渲染？
      • 2.1 新建client文件夹
      • 2.2 生成一个vue项目
      • 2.3 安装依赖并启动
      • 2.4 浏览器查看效果
      • 2.5 查看源代码
    • 3 - 客户端渲染vs服务端渲染
      • 3.1 运行架构对比
      • 3.2 开发模式对比
      • 3.3 特点优势总结
    • 4 - vue框架中的服务端渲染
      • 4.1 新建vue-ssr文件夹
      • 4.2 把server文件夹中的文件拷贝进来
      • 4.3 安装必要依赖
      • 4.4 vue服务端渲染最小demo
      • 4.5 浏览器访问
      • 4.6 查看源代码
      • 4.7 遗留问题
    • 5 - 理解同构理念
    • 6 - Nuxt.js框架使用
      • 1. 使用nuxt.js创建一个ssr项目
      • 2. 启动项目
      • 3. 查看源代码
      • 4. 搭建首页
      • 5. 异步数据获取
        • 1. 认识asyncData方法
        • 2. 获取文章列表（移动端项目）
        • 3. 渲染接口数据
        • 4. 预览效果并查看源代码
    • 7- 总结
      • 7.1 服务端渲染和客户端渲染各自指什么？有什么特点？
      • 7.2 同构的本质是什么？
      • 7.3 Nuxt.js中如何实现异步数据获取（asyncData方法）？

1 - 什么是服务器端渲染？

server side render 前端页面的产生是由服务器端生成的，我们就称之为服务端渲染

1.1 新建server文件夹

server

1.2 生成一个node项目

npm init -y

1.3 安装express

express 官方文档

npm install express --save

1.4 服务端渲染小案例

app.js

const express = require('express')
const app = express()
const port = 3000
// 当路径为跟路径,返回完整的html片段
app.get('/', (req, res) => res.send(`<html><body><h1>hi,hello</h1></body></html>
`))app.listen(port, () => console.log(`Example app listening on port ${port}!`))

1.5 运行查看效果

node app.js

1.6 打开浏览器

http://localhost:3000

在这里插入图片描述

1.7 右键查看源代码

在这里插入图片描述

总结：所谓的服务端渲染值得是页面的内容完全是由服务端侧决定到底要展示出什么内容

2 - 什么是客户端渲染？

client side render 服务端只提供json格式的数据，渲染成什么样子由客户端通过js控制

通过vite快速创建一个基于vue框架的客户端渲染样例

2.1 新建client文件夹

client

2.2 生成一个vue项目

我们使用vite工具快速生成一个vue项目，https://vitejs.dev/

npm init @vitejs/app client-vue-app --template vue

2.3 安装依赖并启动

cd vue-app
npm install (or `yarn`)
npm run dev (or `yarn dev`)

2.4 浏览器查看效果

http://localhost:8080

在这里插入图片描述

2.5 查看源代码

在这里插入图片描述

结论：通过查看源代码我们发现，源代码并没有显示我们页面中实际渲染的内容，我们只看到一个main.js文件，和一个id为app的根元素，所以我们知道网页内容是通过js来动态的进行渲染的，js运行在浏览器，浏览器也就是客户端，这种由浏览器端的js做主导渲染网页内容的方式，我们就称之为客户端渲染

思考题：如何得知一个网站是哪种方式的渲染？

3 - 客户端渲染vs服务端渲染

客户端渲染我们叫做CSR渲染方式，服务端渲染我们叫做SSR渲染

3.1 运行架构对比

在这里插入图片描述

说明

CSR执行流程：浏览器加载html文件 -> 浏览器下载js文件 -> 浏览器运行vue代码 -> 渲染页面

SSR执行流程：浏览器加载html文件 -> 服务端装填好内容 -> 返回浏览器渲染

3.2 开发模式对比

CSR：前后端通过接口JSON数据进行通信，各自开发互不影响

SSR：前后端分工搭配复杂，前端需要写好html模板交给后端，后端装填模板内容返给浏览器

3.3 特点优势总结

客户端渲染（CSR）服务端渲染（SSR）
首次渲染时间长很短
seo支持差良好
前后端分工开发效率快慢

思考：如果我们的项目既想要使用vue高效率的开发项目，同时还想要首屏渲染时间很短，那该怎么办？

4 - vue框架中的服务端渲染

为了解决第3章节提出的问题，目前我们的vue组件都是在浏览器侧通过js渲染出来的，所以首次加载时间很慢，那么我们把vue组件交给服务端负责渲染，渲染为完整内容之后直接返给客户端，是不是就可以可以解决既想渲染快，还想继续使用vue进行开发的问题了？

vue ssr基础使用

4.1 新建vue-ssr文件夹

vue-ssr

4.2 把server文件夹中的文件拷贝进来

4.3 安装必要依赖

npm install vue vue-server-renderer --save

4.4 vue服务端渲染最小demo

app.js

const Vue = require('vue')
const server = require('express')()const renderer = require('vue-server-renderer').createRenderer()server.get('*', (req, res) => {const app = new Vue({data: {url: req.url},template: `<div>访问的 URL 是：{{ url }}</div>`,})renderer.renderToString(app, (err, html) => {if (err) throw errres.send(html)})
})server.listen(8888,() => console.log(`Example app listening on port 8888!`))

4.5 浏览器访问

http://localhost:8888

在这里插入图片描述

4.6 查看源代码

在这里插入图片描述

结论：我们通过在服务器端渲染vue组件的方式，让网页中又有了完整的内容，这样我们就可以既使用了vue开发又节省了首次渲染时间

4.7 遗留问题

修改app.js，添加一个button元素并使用vue的方式绑定click事件

const Vue = require('vue')
const server = require('express')()const renderer = require('vue-server-renderer').createRenderer()server.get('*', (req, res) => {const app = new Vue({data: {url: req.url},template: `<div>访问的 URL 是：{{ url }}<button @click="alert('123')">click me!</button></div>`,})renderer.renderToString(app, (err, html) => {if (err) throw errres.send(html)})
})server.listen(8888,() => console.log(`Example app listening on port 8888!`))

运行发现，页面成功显示了button按钮，但是可惜的是，没有成功绑定事件，点击无效，事实上除了事件没有绑定之外，服务器端虽然完成了vue的渲染，但是给到客户端的时候已经成了字符串了，一系列我们熟悉的vue应用的特性，我们都无法使用，比如数据响应式更新，那该怎么办呢？

为了解决以上问题，我们需要引入一个新的概念，称作 同构

5 - 理解同构理念

一套vue（react）代码，在服务端执行一次，在客户端再执行一次，就做同构

const app = new Vue({data: {url: req.url},template: `<div>访问的 URL 是：{{ url }}<button @click="alert('123')">click me!</button></div>`
})

上面所示的vue代码，我们在服务端的执行保持不变，只要我们把这段代码在客户端再重新执行一遍，不就可以拥有原本vue应用的所有特性了么，确实如此，不过这个过程的难度太大，我们现在只需要理解，所谓的同构是指：同一套vue代码在服务端执行一次在客户端再执行一次

  1. 服务端执行完成渲染解决了首次加载速度慢的问题
  2. 浏览器执行解决了绑定事件及恢复vue本身特性的问题

6 - Nuxt.js框架使用

nuxt.js是一套使用vue框架开发应用的服务端渲染框架，提供了开箱即用的功能

1. 使用nuxt.js创建一个ssr项目

npm create nuxt-app <项目名>

按照提示选择项目之后完成创建，需要注意，这一步要选择ssr
在这里插入图片描述

2. 启动项目

cd vue-ssr-app
npm run dev

http://localhost:3000

在这里插入图片描述

3. 查看源代码

在这里插入图片描述

显然，我们看到了网页上有实际渲染的内容，这是服务端负责的渲染

4. 搭建首页

pages/index.vue

在nuxt.js生成的项目中我们依旧像之前一样写单文件组件.vue代码，ElementUI组件也可以正常使用

<template><div class="container"><Logo /><div class="articleList"><el-collapse><el-collapse-item title="一致性 Consistency" name="1"><div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div></el-collapse-item></el-collapse></div></div>
</template><script>
export default {}
</script><style>
.container{padding:0 200px;
}
.articleList{margin-top:30px;
}
</style>

5. 异步数据获取

https://axios.nuxtjs.org/

1. 认识asyncData方法

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件

官网推荐使用的请求方式 https://axios.nuxtjs.org/

async asyncData({ $axios }) {const ip = await $axios.$get('http://icanhazip.com')return { ip }
},
data(){return {name:'cp'}
}----合并完之后的data数据----
{name:'cp',ip
}

2. 获取文章列表（移动端项目）

async asyncData ({ $axios }) {const url = 'http://ttapi.research.itcast.cn/app/v1_1/articles?channel_id=0&timestamp=1606309443970&with_top=1'const res = await $axios.$get(url)// eslint-disable-next-line no-consoleconsole.log('文章数据列表：', res)return {list: res.data.results}}

3. 渲染接口数据

<el-collapse><el-collapse-item v-for="item in list" :key="item.id" :title="item.title.slice(0,40)"><div>评论数：{{ item.comm_count }}  点赞数：{{ item.like_count }}</div></el-collapse-item>
</el-collapse>

4. 预览效果并查看源代码

结论：我们完成了既使用vue开发模式，又实现了服务端渲染模式，nice~

7- 总结

7.1 服务端渲染和客户端渲染各自指什么？有什么特点？

SSR 服务端渲染  网页内容由服务端生成   首屏时间短  有利于seo
CSR 客户端渲染  vue、react框架渲染方式  spa都是客户端渲染   首屏渲染时间长不利于seo

7.2 同构的本质是什么？

一份vue代码在服务端渲染一遍  然后在客户端再渲染一遍
服务端渲染解决了首屏显示快  客户端渲染是需要把事件、响应式特性等vue经典的特性都绑回去我们既可以使用vue的开发模式 又可以享受俩种渲染方式的优势

7.3 Nuxt.js中如何实现异步数据获取（asyncData方法）？

asyncData函数时Nuxtjs框架内置的一个函数  
执行结果和和data进行融合  一起返给当前组件

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/248514.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

小型软件项目开发流程探讨

小型软件项目开发流程探讨

一&#xff0e;导言国内很多项目都是小型项目, 参与人员少(两到五个人), 要快速交付(一两个月) . 要成功完成这种项目, 除了使用成熟且被团队成员熟练使用的技术之外, 有一个良好的开发流程, 也是很必要的. 二&#xff0e;小型软件项目开发流程下图是我对小型软件项目开发流程…
阅读更多...
sanic官方文档解析之下载和Configuration

sanic官方文档解析之下载和Configuration

1,sanic框架是做什么的? sanic的官方网址:https://sanic.readthedocs.io/en/latest/sanic框架是一个类似于flask框架的在Python3.5以上版本的文本服务器,他能够快速的编写,它是通过惊人的开发效率完成开发,希望通过这篇文章得到激励sanic框架的理念是:简单,高效 sanic的应用如…
阅读更多...
首秀 Express 框架

首秀 Express 框架

文章目录框架特性express的使用初始化项目&#xff1a;下载框架模块&#xff1a;测试代码&#xff1a;总结以上代码&#xff1a;请求处理的中间件概念&#xff1a;中间件——app.use基本用法&#xff1a;next的用法app.use中间件的应用路由的保护网站维护公告自定义404&#xf…
阅读更多...
云原生技能树测评

云原生技能树测评

前言 利用午休后的10多分钟时间&#xff0c;看了看APP的技能树板块&#xff0c;简单的提出几个看法&#xff01; 答题过程 可以设置为闯关类型&#xff0c;答对一道后可以进入下一关&#xff0c;或者是一个章节为一关&#xff0c;让大家一直有一种期待 回答错误数量 可以…
阅读更多...
原型和闭包

原型和闭包

原型和闭包 一切皆对象 一切皆对象&#xff08;类型值除外&#xff09; undefined, number, string, boolean属于简单的值类型 函数、数组、对象、new Number(10)都是对象。他们都是引用类型 Null是基本数据类型&#xff0c;不是引用数据类型 基本数据类型的值就是它本身的值&a…
阅读更多...
一文教会你何为重绘、回流？

一文教会你何为重绘、回流？

文章目录css图层图层创建的条件重绘(Repaint)回流触发重绘的属性触发回流的属性常见的触发回流的操作优化方案requestAnimationFrame----请求动画帧写在最后学习目标&#xff1a; 了解前端Dom代码、css样式、js逻辑代码到浏览器展现过程了解什么是图层了解重绘与回流了解前端层…
阅读更多...
js函数、js对象的这些点你真的懂吗？

js函数、js对象的这些点你真的懂吗？

本篇学习目标 ✨了解函数&#xff08;高级&#xff09;原型原型链概念\textcolor{green}{了解函数&#xff08;高级&#xff09;原型原型链概念}了解函数&#xff08;高级&#xff09;原型原型链概念 ✨掌握函数作用域\textcolor{green}{掌握函数作用域}掌握函数作用域 ✨掌握…
阅读更多...
前端处理跨域的几种方式

前端处理跨域的几种方式

什么是跨域&#xff1f; 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源&#xff0c;这里跨域是广义的。 广义的跨域&#xff1a; 1、资源跳转&#xff1a;A链接、重定向、表单提交 2、资源嵌入&#xff1a; <link>、<script>、<img>、<frame&g…
阅读更多...
程序员必知的缓存套图

程序员必知的缓存套图

文章目录1. 线程与进程1.1 进程:1.2. 线程:1.3. 关系2. 浏览器内核模块组成4. 事件循环机制5. 缓存5.1. 缓存理解5.2. 缓存分类5.3. 缓存使用示意图5.4. 缓存中的header参数1. 线程与进程 1.1 进程: 进程是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进…
阅读更多...
安装webpack及使用

安装webpack及使用

前言 你是否也是只会运用框架中集成好的Webpack配置呢&#xff1f;你明白每一项的意义么&#xff1f;你懂多少Webpack的个性化配置项呢&#xff1f;本篇文章为你讲解Webpack中的各种配置项参数及作用&#xff01; 文章目录了解Webpack相关开启项目编译打包应用使用webpack配置…
阅读更多...
php单例型(singleton pattern)

php单例型(singleton pattern)

搞定&#xff0c;吃饭 <?php /* The purpose of singleton pattern is to restrict instantiation of class to a single object. It is implemented by creating a method within the class that creates a new instance of that class if one does not exist. If an obje…
阅读更多...
助你提高效率的几个Vue指令

助你提高效率的几个Vue指令

前言 很多使用Vue的同学往往最容易忽略的指令&#xff0c;由于在这里考虑到很多初学甚至还没有开始接触Vue的同学呢&#xff0c;在介绍v-clos之前呢就先以大家都熟知的v-model编写小demo v-model 相信大家对v-model并不陌生&#xff0c;简单来讲他就是用于在表单控件以及组建…
阅读更多...
掌握Mock摆脱后端同学的束缚

掌握Mock摆脱后端同学的束缚

文章目录前言Mock概述mock.js安装Mock规范Mock的使用总结前言 当下采用前后端分离模式开发Web应用已经成为气候&#xff0c;在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们&#xff0c;难道在搭建完页面后只能等待后端的接口么&#xff1f;…
阅读更多...
Vue技能树上线啦

Vue技能树上线啦

前言 前端现在越来越多样化&#xff0c;语言众多&#xff0c;大家使用的框架也比较杂&#xff0c;在广泛的前端技术栈面前我唯爱Vue&#xff08;仅代表个人观点勿喷小伙伴们&#xff09;可能很多人觉得我是因为简单&#xff0c;其实并不然&#xff0c;我尝试过很多框架&#x…
阅读更多...
《SpringMVC从入门到放肆》一、概述

《SpringMVC从入门到放肆》一、概述

一、SpringMVC概述 ViewServiceDaoDBSpring MVCinterfaceinterfaceMysqlimplsimplsSpringMVC也叫Spring web mvc&#xff0c;属于表现层框架。SpringMVC是Spring框架的一部分&#xff0c;是在Spring3.0后发布的。 二、第一个SpringMVC程序功能描述&#xff1a;　　用户提交一个…
阅读更多...
手握流量密码，万粉不是梦

手握流量密码，万粉不是梦

前言 可能大家来到CSDN的目的初衷都是不一样的&#xff0c;像我注册CSDN的时候完全是为了解决自己项目中的各种问题&#xff0c;能够有一个为我提供正确答案、正确解决方案的一个平台&#xff0c;简单的了解后我选择CSDN&#xff0c;直到成为现在的创作者也说明我的选择是对的…
阅读更多...
秋季学期学习总结

秋季学期学习总结

转载于:https://www.cnblogs.com/zx666/p/10408950.html
阅读更多...
一文带你了解React框架

一文带你了解React框架

前言 由于 React的设计思想极其独特&#xff0c;属于革命性创新&#xff0c;性能出众&#xff0c;代码逻辑却非常简单。所以&#xff0c;越来越多的人开始关注和使用&#xff0c;认为它可能是将来 Web 开发的主流工具。 这个项目本身也越滚越大&#xff0c;从最早的UI引擎变成…
阅读更多...
Web前端JQuery面试题（一）

Web前端JQuery面试题（一）

Web前端JQuery面试题&#xff08;一&#xff09; 一&#xff1a;选择器 基本选择器 什么是#id&#xff0c;element&#xff0c;.class&#xff0c;*&#xff0c;selector1, selector2, selectorN&#xff1f;答&#xff1a; 根据给定的id匹配一个元素&#xff0c;用于搜索&…
阅读更多...
前端云原生——微信小程序云服务配置

前端云原生——微信小程序云服务配置

前端同样涉及云原生前言创建使用云开发项目搭建云环境测试云服务1. 获取openid&#xff08;上传本地login云函数&#xff09;1.1 创建部署login文件时报错2. 自定义sum函数并创建部署3. 上传图片4. 前端操作数据库5. 即时通信demo面试法宝欢迎各位小伙伴们&#xff01; 为大家推…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023