Vue.js 中的 SSR 之优化 SEO

随着互联网的发展，搜索引擎优化（SEO）越来越重要，尤其对于网站的流量和用户体验来说。在前端开发中，Vue.js 是一个非常流行的框架，但是在使用 Vue.js 开发单页应用（SPA）时，由于内容都是通过 JavaScript 动态生成的，搜索引擎无法抓取页面内容，导致 SEO 不友好。那么该怎么办呢？这时候，我们可以使用 Vue.js 中的服务器端渲染（SSR）来解决这个问题。

SSR 简介

服务器端渲染是指在服务器端将 Vue.js 组件渲染成 HTML 字符串，然后将其发送给浏览器。这样，搜索引擎可以抓取到页面的完整内容，提高了 SEO 的友好度。同时，由于页面的 HTML 字符串是在服务器端生成的，所以浏览器可以更快地展示页面内容，提高了用户体验。

Vue.js 中的 SSR 实现

Vue.js 提供了一个官方的 SSR 库 vue-server-renderer，可以用于在 Node.js 环境中渲染 Vue.js 应用程序。下面我们来看一下如何使用 vue-server-renderer 实现 SSR。

安装依赖

首先，需要安装 vue-server-renderer 和 express，可以使用 npm 进行安装：

--- ------- ------------------- ------- ------

编写服务端代码

接下来，我们需要编写一个服务端代码，用于渲染 Vue.js 应用程序。下面是一个简单的示例：

----- --- - --------------
----- ------- - ------------------
----- ------ - ---------

----- -------- - -----------------------------------------------

--------------- ----- ---- -- -
  ----- --- - --- -----
    ----- -
      -------- ------- --------
    --
    --------- -------- ------- ---------
  --

  ---------------------------- ----- ----- -- -
    -- ----- -
      ----------------------------- ------ -------
      ------
    -
    ---------
      --------- -----
      ----- ----------
        ------
          ----- ----------------
          ------------- -----------
        -------
        --------------------
      -------
    --
  --
--

------------------- -- -- -
  ------------------- ------- -- -----------------------
--

在上面的代码中，我们创建了一个 Express 服务器，并且定义了一个路由，用于处理所有的请求。在路由处理函数中，我们创建了一个 Vue.js 实例，并使用 vue-server-renderer 的 renderToString 方法将其渲染为 HTML 字符串。最后，我们将 HTML 字符串包装在一个完整的 HTML 页面中，发送给客户端。

运行服务端代码

最后，我们需要在命令行中运行服务端代码：

---- ---------

然后，在浏览器中访问 http://localhost:3000，就可以看到渲染后的 HTML 页面了。

优化 SEO

为了进一步优化 SEO，我们可以在服务端渲染时，将数据预取到组件中，然后在客户端渲染时，直接使用预取的数据，避免了客户端再次请求数据的过程，提高了页面的加载速度和用户体验。

数据预取

数据预取是指在渲染组件前，将组件所需的数据提前获取到。在 Vue.js 中，我们可以使用 created 钩子函数来获取数据。在服务端渲染时，我们可以在 server.js 中定义一个路由，用于获取数据，并将数据传递给组件。下面是一个简单的示例：

------------------- ----- ---- -- -
  ----- ---- - - -------- ------- -------- -
  --------------
--

--------------- ----- ---- -- -
  ----- --- - --- -----
    ----- -
      -------- --
    --
    --------- -
      -- ------- ------ --- ------------ -
        -- ----------------
        -------------------------------------------------- -- -
          ------------ - ----------------
        --
      - ---- -
        -- -----------------
        ------------ - --------------------------------
      -
    --
    --------- -------- ------- ---------
  --

  ---------------------------- ----- ----- -- -
    -- ----- -
      ----------------------------- ------ -------
      ------
    -
    ---------
      --------- -----
      ----- ----------
        ------
          ----- ----------------
          ------------- -----------
          -------------------------------- - ------------------ -------- ----------- ------------
        -------
        --------------------
      -------
    --
  --
--

在上面的代码中，我们定义了一个 /data 路由，用于获取数据。在组件的 created 钩子函数中，我们判断当前是在服务端渲染还是客户端渲染，然后分别获取数据。服务端渲染时，我们使用 axios 发送请求获取数据，然后将数据赋值给组件的 message 属性；客户端渲染时，我们直接使用预取的数据。最后，我们将预取的数据序列化成 JSON 字符串，并在 HTML 页面中使用 JavaScript 变量存储起来，以便客户端渲染时使用。

使用路由

在实际项目中，我们通常会使用路由来管理页面和数据。在 Vue.js 中，我们可以使用 vue-router 库来实现路由。在服务端渲染时，我们需要根据当前请求的 URL，匹配到对应的路由，并且获取路由所需的数据。下面是一个简单的示例：

----- ------ - -------------------

--------------- ----- ---- -- -
  ----- ------- - -
    ---- --------
    -------- --
  -

  ------------------------

  ----- ----------------- - -----------------------------

  -- -------------------- -
    ------ ------------------------ -------
  -

  ----- -------- - --

  ------------------------------------- -- -
    -- --------------------- -
      ----- ------- - ---------------------
        ------
        ------ -------------------
      --
      ----------------------
    -
  --

  ----------------------------- -- -
    ----- --- - --- -----
      -------
      ------
      ------- --- -- ------
    --

    ---------------------------- -------- ----- ----- -- -
      -- ----- -
        ----------------------------- ------ -------
        ------
      -
      ---------
        --------- -----
        ----- ----------
          ------
            ----- ----------------
            ------------- -----------
            -------------------------------- - ---------------------------------------
          -------
          --------------------
        -------
      --
    --
  --
--

在上面的代码中，我们首先定义了一个 context 对象，用于存储当前请求的 URL 和组件所需的数据。然后，使用 vue-router 的 push 方法，将当前 URL 推入路由栈中。接着，我们通过 vue-router 的 getMatchedComponents 方法，匹配到当前 URL 对应的路由组件。然后，遍历路由组件，如果组件有 asyncData 方法，就调用它，并将返回的 Promise 对象存入 promises 数组中。最后，使用 Promise.all 方法等待所有的 Promise 对象都返回后，再渲染 Vue.js 应用程序。

在上面的代码中，我们还使用了 Vuex，用于管理应用程序的状态。在服务端渲染时，我们需要将状态预取到组件中，并在客户端渲染时，直接使用预取的状态。下面是一个简单的示例：

----- ----- - ------------------

----- --- - --- -----
  ------
  -------
  ------- --- -- ------
--

--------------- ----- ---- -- -
  ----- ------- - -
    ---- -------
  -

  ------------------------

  ----- ----------------- - -----------------------------

  -- -------------------- -
    ------ ------------------------ -------
  -

  ----- -------- - --

  ------------------------------------- -- -
    -- --------------------- -
      ----- ------- - ---------------------
        ------
        ------ -------------------
      --
      ----------------------
    -
  --

  ----------------------------- -- -
    ---------------------------- -------- ----- ----- -- -
      -- ----- -
        ----------------------------- ------ -------
        ------
      -
      ---------
        --------- -----
        ----- ----------
          ------
            ----- ----------------
            ------------- -----------
            -------------------------------- - ---------------------------------------
          -------
          --------------------
        -------
      --
    --
  --
--

在上面的代码中，我们定义了一个 Vuex 的 store，用于管理应用程序的状态。在服务端渲染时，我们需要将状态预取到组件中，然后在客户端渲染时，直接使用预取的状态。下面是一个简单的示例：

----- ---- - -
  --------- -------- ------- ----------
  ----------- ----- -- -
    ------ ------------------------------
  --
  --------- -
    --------- -
      ------ -------------------------
    -
  -
-

----- ----- - --- ------------
  ------ -
    -------- --
  --
  ---------- -
    ----------------- -------- -
      ------------- - -------
    -
  --
  -------- -
    -------------- ------ -- -
      ------ -------------------------------------------------- -- -
        -------------------- -----------------
      --
    -
  -
--

在上面的代码中，我们定义了一个 Home 组件，用于显示 message 的值。在组件中，我们使用 asyncData 方法，获取 message 的值，并将其存入 Vuex 的状态中。在组件的 computed 属性中，我们直接使用 Vuex 的状态，渲染组件。

总结

通过本文的介绍，我们了解了 Vue.js 中的服务器端渲染（SSR），以及如何使用 vue-server-renderer 库实现 SSR。同时，我们还介绍了如何通过预取数据和使用路由，优化 SEO 和提高用户体验。希望本文能对大家理解和使用 Vue.js SSR 有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655e02aed2f5e1655d84d173

阅读全文

猜你喜欢

  • Koa2 源码分析之 http 上下文和请求上下文

    Koa2 是一个基于 Node.js 平台的 Web 开发框架，它的核心思想是中间件，通过将各种功能模块封装成中间件，来实现更加灵活和可扩展的应用开发。在 Koa2 中，每个请求都会被封装成一个上下文...

    1 年前
  • 使用 Babel 进行 JSX 转换报错解决方法

    前言 在 React 开发中，我们经常使用 JSX 语法来描述组件的结构和样式。然而，由于浏览器对 JSX 语法的支持并不完善，我们需要使用 Babel 进行转换，将 JSX 语法转换为浏览器可识别的...

    1 年前
  • CSS Flexbox 布局：使用 align-content 属性解决多行等分布局的问题

    什么是 Flexbox 布局？ Flexbox 是一种用于网页布局的 CSS3 模块，它提供了一种更加灵活、简单的布局方式，可以让我们更加轻松地实现弹性布局。Flexbox 布局可以帮助我们解决网页布...

    1 年前
  • 处理 Express.js 中的 500 错误：在生产环境中记录错误消息

    Express.js 是一款流行的 Node.js Web 框架，它可以帮助我们快速构建 Web 应用。然而，即使我们的应用程序经过仔细的测试和调试，仍然可能会在生产环境中遇到错误。

    1 年前
  • Fastify 框架的数据序列化与反序列化详解

    Fastify 是一个快速、低开销、高效的 Node.js Web 框架。它提供了一个基于插件的体系结构，使得开发者可以轻松地组合和扩展功能。在 Fastify 中，数据序列化和反序列化是非常重要的一...

    1 年前
  • Next.js 中如何优化 HTTP 请求

    在现代 Web 应用程序中，HTTP 请求是不可或缺的一部分。而在 Next.js 中，我们可以通过一些技术手段来优化 HTTP 请求，提升应用程序的性能和用户体验。

    1 年前
  • React 单元测试的利器：实战 Enzyme + Jest

    在前端开发中，React 已经成为了非常流行的框架，它的组件化开发方式让我们能够更好地管理代码、提高代码复用率，但是在开发过程中如何保证组件的质量呢？这时候单元测试就变得非常重要了。

    1 年前
  • Mongoose 在 Node.js 中如何使用 limit 和 skip

    在使用 Node.js 进行开发时，我们经常需要与数据库进行交互。Mongoose 是 Node.js 中一个非常流行的对象模型工具，它可以帮助我们更方便地与 MongoDB 进行交互。

    1 年前
  • LESS 使用中对于选择器的继承处理技巧

    LESS 使用中对于选择器的继承处理技巧 LESS 是一种动态样式语言，它在 CSS 的基础上增加了变量、函数、运算等特性，方便开发者进行样式定义和管理。其中，选择器的继承处理技巧是 LESS 中一个...

    1 年前
  • ES11 新特性：Private Class Fields 解决 JS 封装私有数据的问题

    在 JavaScript 中，封装是一种常见的编程技术，它可以帮助我们隐藏对象的内部状态，避免外部直接访问和修改对象的属性和方法。然而，在传统的 JavaScript 中，我们无法真正实现私有属性和方...

    1 年前
  • ES7 的 Array.prototype.include 使用详解

    ES7 的 Array.prototype.include 使用详解 在 ES7 中，Array.prototype.include 是一个非常实用的数组方法，它可以快速地确定一个元素是否存在于数组中...

    1 年前
  • ES9 规范之 BigInt 数据类型

    在 JavaScript 中，数字类型是一种常见的数据类型。然而，对于超出了 JavaScript 数字类型最大范围的数字，JavaScript 无法处理。ES9 规范引入了 BigInt 数据类型，...

    1 年前
  • Kubernetes 中使用 kubeless 实现 Serverless

    Serverless 是一种新型的云计算模式，它允许开发者在不需要管理服务器的情况下构建和运行应用程序。Kubernetes 是一种流行的容器编排工具，它提供了一种可扩展、可靠和高效的方式来管理容器化...

    1 年前
  • 在 Deno 项目中使用 ORM 的方式和技巧

    什么是 ORM？ ORM（Object-Relational Mapping）是一种编程技术，用于将关系型数据库中的数据映射到面向对象编程语言中的对象。这种技术使得开发人员可以使用面向对象的方式来操作...

    1 年前
  • Sequelize 查询时出现 "cannot be null" 错误的解决方案

    在使用 Sequelize 进行数据库操作时，我们有时会遇到 "cannot be null" 的错误提示。这个错误通常是由于我们在进行查询操作时，没有正确地设置查询条件或者没有正确地设置查询参数造成...

    1 年前
  • ES2019：如何在字符串的开头和结尾删除空格

    ES2019：如何在字符串的开头和结尾删除空格 在前端开发中，字符串处理是一个非常常见的操作。在字符串处理中，经常需要对字符串进行去除开头和结尾的空格操作。在ES2019中，提供了一种新的方法，可以非...

    1 年前
  • 高质量编写 Java 代码，提高程序性能

    Java 是一门广泛应用于企业级应用的编程语言，因其强大的面向对象特性和跨平台性能，成为了许多企业的首选语言。但是，在编写 Java 代码时，我们需要注意一些细节，以确保代码的质量和性能。

    1 年前
  • Web Components 中如何实现图片懒加载？

    Web Components 中如何实现图片懒加载？ 懒加载是一种常用的提升网站性能的技术。它可以延迟加载页面中的图片，当用户滚动到图片位置时再进行加载，避免了页面一次性加载大量图片造成的性能问题。

    1 年前
  • AngularJS+Ionic 打造移动 Web 应用

    移动 Web 应用开发已经成为了当今互联网领域的热点之一。而在移动 Web 应用开发中，AngularJS 和 Ionic 是两个非常流行的前端框架，它们的结合可以帮助开发者快速构建出高质量的移动 W...

    1 年前
  • 部署 Koa 应用至阿里云服务器

    前言 Koa 是一个基于 Node.js 平台的下一代 web 开发框架，它提供了一种更加简洁、灵活的方式来编写 web 应用程序。而阿里云则是国内知名的云计算服务提供商，它提供了强大的云服务器和云数...

    1 年前

相关推荐

    暂无文章