聊一聊Vue构建大型单页面应用及服务端渲染 (SSR)

单页面应用(Single Page Application,SPA)

是一种基于前端技术的应用开发模式,它在一个页面中加载所有必要的资源,并通过动态加载和更新内容来实现用户界面的切换和交互。我们使用的Vue 通常情况下用于单页面应用的开发。以下是单页面开发的优缺点:

优点

  1. 快速响应和交互体验: SPA 初始加载后,通过 AJAX 或 Fetch 请求动态加载数据,实现快速的页面切换和无刷新交互,提供更流畅的用户体验。

  2. 前后端分离: SPA 通过 API 与后端通信,实现前后端分离。

  3. 动态加载资源: SPA 只需要加载一次页面,后续的页面切换和内容更新都可以通过动态加载资源来实现,减少了不必要的页面刷新和带宽消耗。

  4. 减轻服务端压力:减轻服务器压力,服务器只需要提供API接口,不用管页面逻辑和页面的拼接,吞吐能力会提高几倍。

缺点

  1. SEO 难度: 由于 SPA 在初始加载时只有一个 HTML 页面,搜索引擎难以获得完整的页面内容,影响搜索引擎优化(SEO)效果。

  2. 初始加载较慢(白屏问题): SPA 首次加载时需要下载所有必要的资源,导致初始加载时间较长,尤其是在网络条件较差时。

  3. 不利于弱网络环境: 在弱网络环境下,动态加载资源会导致页面内容出现延迟或加载失败,影响用户体验。

如何用Vue构建大型单页面应用

服务端渲染 (SSR)

什么是 SSR?

Vue.js 是一个用于构建客户端应用的框架。默认情况下,Vue 组件的职责是在浏览器中生成和操作 DOM。然而,Vue 也支持将组件在服务端直接渲染成 HTML 字符串,作为服务端响应返回给浏览器,最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。

为什么要用 SSR?

与客户端的单页应用 (SPA) 相比,SSR 的优势主要在于:

  • 更快的首屏加载:这一点在慢网速或者运行缓慢的设备上尤为重要。服务端渲染的 HTML 无需等到所有的 JavaScript 都下载并执行完成之后才显示,所以你的用户将会更快地看到完整渲染的页面。

  • 更好的 SEO:搜索引擎爬虫可以直接看到完全渲染的页面。

使用Vue SSR

ssr有两个入口文件,client-entry 和 server-entry.js 也就是客户端和服务端入口文件,都包含了同一套应用代码,webpack 通过两个入口文件分别打包成给服务端用的 server bundle 和给客户端用的 client bundle. 当服务器接收到了来自客户端的请求之后,会创建一个渲染器 bundleRenderer,这个 bundleRenderer 会读取上面生成的 server bundle 文件,并且执行它的代码, 然后发送一个生成好的 html 到浏览器,等到客户端加载了 client bundle 之后,会和服务端生成的DOM 进行对比,也就是判断这个DOM 和自己即将生成的DOM 是否相同,如果相同就将客户端的vue实例挂载到这个DOM上, 否则会提示警告。 

  • 服务端预渲染

        vue2.0引入了虚拟DOM,实现原理就是vue的编译器在编译模板之后, 会将这些模板编译成一个渲染函数,也就是render方法, 函数被调用的时 候就会渲染并且返回一个虚拟DOM的树,在交给一个patch函数,把虚拟 DOM施加到真实的DOM上。这样做的主要原因是因为js的运算是非常快 的,而在浏览器中直接操作DOM会对性能有一定损耗。

  • 流式渲染

        服务端渲染支持流式渲染,因为http请求也是流式的,在渲染组件时返回一个可读的 stream 流,然后直接写入 到 HTTP 响应中。流式渲染 能够确保服务端的响应度,也能让用户更快地获得渲染内容。

  • 对组件进行缓存
  • 前后端复用一套代码

        前端和服务端可以复用一套代码,提升开发效率和维护性

渲染一个应用

让我们来看一个 Vue SSR 最基础的实战示例。

  1. 创建一个新的文件夹,cd 进入
  2. 执行 npm init -y
  3. 在 package.json 中添加 "type": "module"
  4. 执行 npm install vue
  5. 执行 npm install express
  6. 创建下面的 server.js 文件:
import express from 'express'
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

const server = express()

server.get('/', (req, res) => {
  const app = createSSRApp({
    data: () => ({ count: 1 }),
    template: `<button @click="count++">{{ count }}</button>`
  })

  renderToString(app).then((html) => {
    res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue SSR Example</title>
      </head>
      <body>
        <div id="app">${html}</div>
      </body>
    </html>
    `)
  })
})

server.listen(3000, () => {
  console.log('ready')
})

代码文件结构如上,执行 node server.js,访问 http://localhost:3000

客户端激活

如果你点击该按钮,你会发现数字并没有改变。这段 HTML 在客户端是完全静态的,因为我们没有在浏览器中加载 Vue。

为了使客户端的应用可交互,Vue 需要执行一个激活步骤。在激活过程中,Vue 会创建一个与服务端完全相同的应用实例,然后将每个组件与它应该控制的 DOM 节点相匹配,并添加 DOM 事件监听器。

把应用的创建逻辑拆分到一个单独的文件 app.js 中:

// app.js (在服务器和客户端之间共享)
import { createSSRApp } from 'vue'

export function createApp() {
  return createSSRApp({
    data: () => ({ count: 1 }),
    template: `<button @click="count++">{{ count }}</button>`
  })
}

我们在客户端入口导入通用代码,创建应用并执行挂载:

// client.js
import { createApp } from './app.js'

createApp().mount('#app')

按钮现在可以交互了!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
### 回答1: Vue SSR(Server Side Rendering)服务渲染是一种在服务Vue组件渲染成HTML字符串的技术。Vue SSR可以提高应用程序的性能和搜索引擎优化。在此基础上,Nuxt.js是一个基于Vue.js的通用应用框架,它通过一个命令行工具来创建和管理Vue SSR应用程序。Nuxt.js提供了一些默认的配置,使得创建Vue SSR应用程序变得非常简。 CNode社区是一个专门讨论Node.js技术的社区,许多Node.js开发者都会在这里交流。在本文中,我们将使用Nuxt.js来创建一个CNode社区的SSR应用程序。我们将使用CNode社区提供的API来获取帖子列表,然后使用Nuxt.js来将其渲染成HTML字符串,最后将其呈现给用户。 首先,我们需要安装Nuxt.js和一些必要的依赖项。可以使用以下命令来安装: ``` npm install --save nuxt axios ``` 接下来,我们需要配置Nuxt.js。我们可以在项目的根目录中创建一个`nuxt.config.js`文件来配置Nuxt.js。我们需要配置Nuxt.js的一些选项,例如页面路由、构建选项、插件等等。以下是一个简的配置示例: ```javascript module.exports = { head: { title: 'CNode社区', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, ], }, modules: ['@nuxtjs/axios'], axios: { baseURL: 'https://cnodejs.org/api/v1', }, plugins: ['~/plugins/vue-markdown.js'], }; ``` 在上面的配置中,我们设置了页面标题,设置了meta标签,使用了`@nuxtjs/axios`模块来发送HTTP请求,设置了API的基本URL,以及添加了一个Vue插件来渲染Markdown。 接下来,我们需要创建页面。在Nuxt.js中,每个`.vue`文件都可以作为一个页面,它们位于`pages`目录中。我们可以创建一个名为`index.vue`的文件来显示CNode社区的帖子列表。以下是`index.vue`的示例代码: ```html <template> <div> <h1>CNode社区</h1> <ul> <li v-for="post in posts" :key="post.id"> <router-link :to="'/post/' + post.id">{{ post.title }}</router-link> </li> </ul> </div> </template> <script> export default { asyncData({ $axios }) { return $axios.get('/topics').then((res) => { return { posts: res.data.data }; }); }, }; </script> ``` 在上面的代码中,我们使用了Vue.js的`v-for`指令来遍历每个帖子,并使用Vue.js的`router-link`组件来呈现帖子标题和链接。我们还使用了Nuxt.js提供的`asyncData`方法来在服务获取帖子列表。在这个方法中,我们使用了`$axios`模块来发送HTTP请求,获取帖子列表数据,并将其存储在`posts`变量中。 最后,我们需要启动应用程序。可以使用以下命令来启动: ``` npm run dev ``` 这将启动一个本地服务器,可以在浏览器中访问`http://localhost:3000`来查看我们的应用程序。 总结一下,通过Nuxt.js和Vue SSR技术,我们可以快速创建一个CNode社区帖子列表的SSR应用程序。我们只需要简地配置Nuxt.js,然后创建一个`.vue`文件作为页面,并使用`asyncData`方法来获取数据和渲染页面。 ### 回答2: Vue SSR服务渲染是指在服务Vue组件渲染为HTML,然后将其发送给浏览器进行展示。这种技术的好处是可以提高页面渲染速度和SEO友好性。 Nuxt.js是一个基于Vue.js的服务渲染应用框架,它提供了很多方便的特性和工具,可以帮助我们快速开发和部署Vue SSR应用。 CNode社区是一个以Node.js为后Vue.js为前的技术社区。我们可以使用Nuxt.js来打造CNode社区的SSR应用,从而提升用户体验和搜索引擎的收录。 首先,我们可以使用Nuxt.js的CLI工具来初始化一个新的项目,选择SSR模式。然后,我们可以根据CNode社区的需求,创建相应的页面组件,如首页、帖子详情页、用户个人中心等。 在创建这些页面组件的过程中,我们可以使用Nuxt.js提供的一些特性,如动态路由、全局组件等,来简化开发和提升复用性。 在每个页面组件中,我们可以通过asyncData方法来获取数据,并将其作为组件的属性进行渲染。这样,我们就可以在服务获取数据并渲染好HTML,然后将其发送到浏览器进行展示。 为了提高页面的加载速度,我们可以使用Nuxt.js的代码拆分功能,将不同页面的代码拆分成多个小块,并按需加载。这样,用户只需要加载当前页面所需的代码,可以减少页面的加载时间。 最后,我们可以使用Nuxt.js的部署工具来快速部署CNode社区的SSR应用。Nuxt.js支持将应用打包成静态文件,并可以轻松地部署到各种服务器或服务商上。 总结来说,通过深入学习Vue SSR服务渲染,借助Nuxt.js框架,我们可以有效地打造CNode社区的SSR应用,提升用户体验和搜索引擎的收录,从而更好地为用户提供技术交流和资源分享的平台。 ### 回答3: Vue SSR服务渲染)是一种将Vue应用程序在服务进行渲染的技术。通过使用服务渲染,可以将静态HTML页面返回给客户浏览器,从而提高首次加载速度和搜索引擎的抓取能力。而Nuxt.js是一个基于Vue SSR的框架,提供了一整套开箱即用的功能以快速构建Vue SSR应用程序。 在使用Nuxt.js构建CNode社区时,我们可以深入学习Vue SSR服务渲染的原理和技巧。首先,我们需要了解Nuxt.js提供的目录结构和配置文件,这些会帮助我们更好地组织和管理前开发流程。接下来,我们需要学习如何使用Nuxt.js的路由系统和异步数据获取功能,这些能帮助我们实现动态的页面渲染和数据预取。 在深入学习Vue SSR服务渲染时,我们还需要了解服务渲染的优势和限制。通过SSR,我们可以提供更好的搜索引擎优化和用户体验,但也需要注意应用程序中可能出现的问题,比如对于某些浏览器不支持的特性、第三方库的兼容性和性能方面的考虑等。 除此之外,为了更好地打造CNode社区,我们还需要学习如何使用Nuxt.js的插件系统和组件库,以及如何与后API进行交互和数据处理。通过深入学习Vue SSR服务渲染和使用Nuxt.js打造CNode社区,我们可以提升自己的前开发技能,并且能够快速构建出高效、可扩展的Vue SSR应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ikkkp

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值