vue-createApp()与createSSRApp()

你眼中的光
5,316 阅读6分钟

createApp

创建一个应用实例，用于创建客户端渲染（Client-Side Rendering, CSR）

function cretateApp(Component,Props)
  • Component根组件
  • Props传递根组件的Props

createSSRApp

创建一个应用实例，服务端渲染应用（SSR），用于创建服务器端渲染（Server-Side Rendering, SSR）

function createSSRApp(Component,Props)
  • Component根组件
  • Props传递根组件的Props

createApp与createSSRApp的区别

  1. 渲染位置：

    • createApp()：用于创建客户端渲染（Client-Side Rendering, CSR）的应用实例。这意味着所有的 Vue 组件都是在用户的浏览器中渲染的。
    • createSSRApp()：用于创建服务器端渲染（Server-Side Rendering, SSR）的应用实例。在这种模式下，Vue 组件首先在服务器上渲染成 HTML 字符串，然后这个字符串被发送到客户端（用户的浏览器）。

  2. 性能：

    • 客户端渲染（createApp()）：由于组件是在用户的浏览器中渲染的，因此初始加载可能需要一些时间，特别是当组件结构复杂或包含大量数据时。但是，一旦加载完成，应用就能实现高度的交互性和动态性。
    • 服务器端渲染（createSSRApp()）：服务器会预先渲染组件，因此用户能更快地看到页面的初始内容。这对于首屏加载速度至关重要，特别是在移动设备或慢速网络上。但是，服务器负担可能会加重，且用户与页面的交互可能会受到一定限制，因为大部分动态内容需要依赖后续的客户端渲染。

  3. 交互性和动态性：

    • 客户端渲染（createApp()）：能够实现更丰富的交互性和动态性，因为所有的 Vue 组件都在客户端实时渲染和更新。
    • 服务器端渲染（createSSRApp()）：虽然初始内容是由服务器渲染的，但后续的交互和动态更新通常仍然依赖于客户端的 JavaScript 执行。然而，由于初次渲染已经完成，交互和动态更新的延迟可能会减少。

  4. 搜索引擎优化（SEO） ：

    • 服务器端渲染（createSSRApp()）：对于搜索引擎更加友好，因为搜索引擎可以直接读取服务器生成的 HTML 内容。这有助于搜索引擎更好地索引你的网页内容。
    • 客户端渲染（createApp()）：由于内容是在浏览器中通过 JavaScript 动态生成的，搜索引擎可能无法直接读取和索引这些内容。这可能会影响网页在搜索引擎结果中的排名。

为什么搜索引擎可以读取服务器生成html的内容

  1. 直接访问性：搜索引擎的爬虫（或称为机器人）能够像普通用户一样，通过HTTP请求访问网站。当它们发送请求到服务器时，服务器会响应并返回相应的HTML内容。这些HTML内容是由服务器动态生成的，包括通过服务器端渲染（SSR）等技术生成的页面。由于搜索引擎爬虫能够直接访问并获取这些HTML内容，因此它们可以读取和解析服务器生成的页面内容。
  2. 文本解析能力：搜索引擎爬虫具备解析HTML的能力，它们可以分析HTML文档的结构和内容，提取出页面中的标题、段落、链接等关键信息。这些信息对于搜索引擎来说非常重要，因为它们帮助搜索引擎理解页面的主题和内容，从而进行索引和排名。
  3. 标准化格式：HTML是一种标准化的标记语言，用于描述网页的结构和内容。由于HTML的标准化，搜索引擎爬虫能够以一种一致和可预测的方式解析和提取页面信息。无论是静态HTML页面还是服务器动态生成的HTML页面，只要它们符合HTML规范，搜索引擎爬虫就能够读取和解析它们。
  4. SEO优化：许多网站为了提升在搜索引擎中的排名，会采用搜索引擎优化（SEO）的策略。这些策略包括使用合适的标题、关键词、描述等元素，以及优化页面结构和链接等。当服务器生成HTML内容时，这些SEO优化元素也会被包含在内，从而帮助搜索引擎更好地理解页面的内容和意图。

注意点

  1. 因为没有任何动态更新，所以像 onMounted 或者 onUpdated 这样的生命周期钩子不会在 SSR 期间被调用，而只会在客户端运行。

    • onMounted：这个钩子在客户端被调用，当组件的模板被挂载到 DOM 上之后执行。在 SSR 中，因为组件的模板是在服务器上渲染成 HTML 的，所以 onMounted 不会在服务器端被调用。它只在客户端被触发，这时组件已经插入到了真实的 DOM 中，可以进行 DOM 操作或启动一些需要 DOM 环境的插件和库。
    • onUpdated：这个钩子在组件的响应式状态发生变化导致重新渲染后调用。同样，在 SSR 期间，组件的初始渲染是在服务器上完成的，因此 onUpdated 也不会在服务器端被调用。当页面在客户端被 Vue 接管后，如果组件的状态发生变化并导致重新渲染，那么 onUpdated 会在客户端被触发。

    为什么这些钩子不在 SSR 期间被调用？

    1. DOM 不存在：在服务器端，没有 DOM 环境，因此无法进行 DOM 操作或访问 DOM API。onMounted 和 onUpdated 这样的钩子通常涉及到 DOM 相关的操作，所以它们不适合在 SSR 期间调用。
    2. 性能考虑：SSR 的目标是尽快生成 HTML 并发送给客户端，以便用户能更快地看到页面的初始内容。在服务器端调用与 DOM 相关的钩子会增加渲染时间，这与 SSR 的目标相悖。
    3. 职责分离：SSR 负责生成初始的 HTML 内容，而 Vue 在客户端负责处理交互和动态更新。这种职责的分离使得每个部分都能专注于其擅长的领域，从而提高整体性能和用户体验。

  2. 你应该避免在 setup() 或者 <script setup> 的根作用域中使用会产生副作用且需要被清理的代码。请将含有副作用的代码放到 onMounted 中。

    • 在 setup() 或 <script setup> 的根作用域中直接编写代码时，你需要特别注意避免使用会产生副作用且需要被清理的代码。副作用通常指的是那些改变外部状态或执行异步操作（如网络请求、定时器、事件监听器等）的代码。如果这些副作用代码没有被适当地清理，可能会导致内存泄漏、组件状态不一致或其他难以预见的问题。

    • 为什么要在 onMounted 中放置含有副作用的代码呢？onMounted 是一个生命周期钩子，它会在组件的模板被挂载到 DOM 后调用。将副作用代码放在 onMounted 中可以确保在组件已经准备好并可见给用户之前，这些代码不会被执行。此外，onMounted 钩子还提供了一个清理机制，你可以在其中返回一个清理函数，以确保在组件卸载时副作用被正确地清理。

avatar
文章
阅读
粉丝