【Vue 开发实战】生态篇 # 22:Nuxt核心原理是什么?

简介: 【Vue 开发实战】生态篇 # 22:Nuxt核心原理是什么?

说明

【Vue 开发实战】学习笔记。



SSR


vue项目是通过虚拟 DOM来挂载到html的,所以对spa项目,爬虫才会只看到初始结构。虚拟 DOM,最终要通过一定的方法将其转换为真实 DOM。虚拟 DOM 也就是 JS 对象,整个服务端的渲染流程就是通过虚拟 DOM 的编译成完整的html来完成的。


我们通过服务端渲染解析虚拟 DOM成html之后,你会发现页面的事件,都没法触发。那是因为服务端渲染vue-server-renderer插件并没有做这方面的处理,所以我们需要客户端再渲染一遍,简称同构。所以Vue服务端渲染其实是渲染了两遍。


下面给出一个官方的 SSR 构建图:


29a70bae27a8499e87a0c8137dbff5f3.png


需要通过 Webpack 打包生成两份 bundle 文件:

  • Client Bundle,给浏览器用。和纯 Vue 前端项目 Bundle 类似
  • Server Bundle,供服务端 SSR 使用,一个 json 文件



流程图

864d20330c654e9aa82c1df4e705695b.png





目录
相关文章
|
4天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
8 0
|
6天前
|
JavaScript
|
7天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
13 2
|
3天前
|
JavaScript 前端开发
Vue躬行记(7)——渲染函数和JSX
Vue躬行记(7)——渲染函数和JSX
8 0
|
JavaScript 前端开发 中间件
VUE 服务器端渲染-NUXT
VUE 服务器端渲染-NUXT
103 0
|
JavaScript 前端开发 中间件
VUE 服务器端渲染-NUXT
VUE 服务器端渲染-NUXT
141 0
|
8天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
67 7
使用 Vue CLI 脚手架生成 Vue 项目
|
10天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
11 1
|
10天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
25 1
|
12天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
19 3