应用程序的类型

如今的 Web 应用程序与几十年前的截然不同。那时我们的选择和解决方案较少。今天，它们蓬勃发展。无论我们称它们为 “应用程序” 还是 “应用”，它们都是一样的。在本书中，我们将称它们为 “应用”。因此，我们可以将当前的 Web 应用分为以下几类：

  • 传统的服务器端渲染应用

  • 传统的单页应用 (SPA)

  • 通用服务器端渲染应用 (Universal SSR app)

  • 静态生成应用 (Static-generated app)

让我们逐一了解它们，并理解它们的优缺点。我们将首先看看最古老的应用类型——传统的服务器端渲染应用。

传统服务端渲染应用

服务器端渲染是将数据和 HTML 传递到屏幕上浏览器客户端的最常见方法。在 Web 行业刚刚起步时，这是唯一的实现方式。在传统的服务器渲染应用或动态网站中，每个请求都需要服务器重新渲染一个新的页面到浏览器。这意味着你每次向服务器发送请求时，都会再次重新加载所有脚本、样式和模板。重新加载和重新渲染的想法听起来一点也不吸引人且不优雅。尽管如今可以使用 AJAX 来减轻一些重新加载和重新渲染的负担，但这会增加应用程序的复杂性。

让我们来看看这些类型的应用程序的优点和缺点。

优点

  • 更好的 SEO 性能：由于客户端（浏览器）接收到包含所有数据和 HTML 标签（尤其是属于页面的 meta 标签）的完整页面，搜索引擎可以抓取并索引该页面。

  • 更快的初始加载时间：由于页面和内容在发送到客户端浏览器之前，由服务器端的脚本语言（如 PHP）在服务器端呈现，因此我们在客户端可以快速获得呈现的页面。此外，与传统的 SPA 不同，无需在 JavaScript 文件中编译网页和内容，因此应用程序在浏览器中加载更快。

缺点

  • 较差的用户体验：由于每个页面都必须重新呈现，并且此过程在服务器上需要时间，因此用户必须等待所有内容在浏览器中重新加载，这可能会影响用户体验。大多数时候，我们只希望在提供新请求时才获取新数据；例如，我们不需要重新生成 HTML 基础结构（如导航栏和页脚），但无论如何，这些基本元素仍然会被重新呈现。我们可以使用 AJAX 仅呈现特定的组件，但这会使开发更加困难和复杂。

  • 后端和前端逻辑的紧密耦合：视图和数据通常在同一个应用程序中一起处理。例如，在典型的 PHP 框架应用程序（如 Laravel）中，你可能会在路由中使用模板引擎（如 Laravel Pug）呈现视图。或者，如果你使用 Express 构建传统的服务器端渲染应用程序，你可能会使用模板引擎（如 Pug 或 vuexpress）来呈现视图。在这两个典型的传统服务器端渲染应用程序框架中，即使我们可以使用模板引擎提取视图层，视图也与后端逻辑耦合在一起。后端开发人员必须知道每个特定路由或控制器使用哪个视图（例如，home.pug）。另一方面，前端开发人员必须与后端开发人员在同一个框架内处理视图。这增加了项目的复杂性。

传统单页应用 (SPA)

与服务器端渲染应用程序相反，SPA 是客户端渲染 (CSR) 应用程序，它使用浏览器中的 JavaScript 呈现内容，而无需在使用过程中重新加载新页面。因此，你从服务器获取的是一个基本的 HTML 结构，而不是内容已经渲染到 HTML 文档中，内容将使用浏览器中的 JavaScript 加载，如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue/dist/vue.js"
          type="text/javascript"></script>
  <script src="/path/to/app.js"type="text/javascript"></script>
</body>
</html>

这是一个非常简单的 Vue 应用程序，你只有一个 <div> 容器，其 ID 为 app，内部没有任何其他内容，后面跟着两个 <script> 元素。第一个 <script> 元素将加载 Vue.js 库，而第二个将加载渲染应用程序内容的 Vue 实例，如下所示：

// path/to/app.js
const app = new Vue({
  data: {
    greeting:'Hello World!'
  },
  template: '<p>{{ greeting }}</p>'
}).$mount('#app')

让我们来看看这种应用程序的优点和缺点。

优点

  • 更好的用户体验：SPA 在初始加载后渲染内容非常快。大多数资源（如 CSS 样式、JavaScript 代码和 HTML 模板）在应用程序的整个生命周期中只加载一次。之后只发送和接收数据；基本的 HTML 和布局保持不变，从而提供流畅且更好的用户体验。

  • 更简单的开发和部署：与需要服务器和服务器端脚本语言的应用程序相比，SPA 开发入门相对容易。你可以简单地从本地计算机使用 file://URI 启动开发。部署也更容易，因为它由 HTML、JavaScript 和 CSS 文件组成；你可以直接将它们放到远程服务器上并立即上线。

缺点

  • 搜索引擎性能较差：SPA 是基本的单个 HTML 页面，大多没有供搜索引擎爬虫抓取的标题和段落标签。SPA 内容通过爬虫大多无法执行的 JavaScript 加载，因此 SPA 通常在 SEO 方面表现不佳。

  • 初始加载时间较慢：大多数资源（如 CSS 样式、JavaScript 代码和 HTML 模板）在应用程序的整个生命周期中只加载一次，因此我们需要在开始时一次性加载大量这些资源文件。这样做通常会导致应用程序的初始加载时间变慢，尤其是在大型 SPA 中。

通用服务端渲染应用 (SSR)

正如我们在上一节中所了解的，传统的服务器端渲染应用程序和 SPA 各有优缺点。编写 SPA 有其优势，但你会失去一些东西：Web 爬虫遍历你的应用程序的能力以及应用程序初始加载时的较慢性能。这与编写传统的服务器端渲染应用程序正好相反，而且你也会失去一些东西，例如 SPA 中更好的用户体验和有趣的客户端开发。理想情况下，客户端和服务器端渲染可以在用户体验和性能之间取得平衡。这就是通用服务器端渲染（SSR）弥合差距的地方。

自 2009 年 Node.js 发布以来，JavaScript 已经成为一种同构语言。同构意味着代码可以在客户端和服务器端运行。同构（通用）JavaScript 可以定义为客户端和服务器端应用程序的混合体。这是一种新的 Web 应用程序方法，用于弥补传统 SSR 应用程序和传统 SPA 的缺点。Nuxt 就属于这一类。

在通用 SSR 中，你的应用程序将首先在服务器端预加载，预渲染页面，并在切换到客户端操作之前将渲染的 HTML 发送到浏览器，以便在应用程序的其余生命周期内运行。从头开始构建通用 SSR 应用程序可能很繁琐，因为它需要在实际开发过程开始之前进行大量的配置。这正是 Nuxt 旨在通过预设创建 SSR Vue 应用程序所需的所有配置来实现的目标。

尽管通用 SSR 应用程序是我们现代 Web 开发中的一个很好的解决方案，但这类应用程序仍然存在一些优点和缺点。让我们来看看它们。

优点

  • 更快的初始加载时间：在通用 SSR 中，JavaScript 和 CSS 被拆分成代码块，资源得到优化，页面在服务器端渲染后才提供给客户端浏览器。所有这些选项都有助于加快初始加载时间。

  • 更好的 SEO 支持：由于所有页面都在服务器端使用适当的元内容、标题和段落进行渲染，然后再提供给客户端，因此搜索引擎爬虫可以遍历页面，从而提高应用程序的 SEO 性能。

  • 更好的用户体验：通用 SSR 应用程序在初始加载后像传统的 SPA 一样工作，页面和路由之间的过渡是无缝的。只有数据在来回传输，而无需重新渲染 HTML 内容容器。所有这些特性都有助于提供更好的整体用户体验。

缺点

  • 需要 Node.js 服务器：在服务器端运行 JavaScript 需要 Node.js 服务器，因此在使用 Nuxt 和编写应用程序之前必须设置好服务器。

  • 复杂的开发：在通用 SSR 应用程序中运行 JavaScript 代码可能会令人困惑，因为一些 JavaScript 插件和库仅用于在客户端运行，例如用于样式和 DOM 操作的 Bootstrap 和 Zurb Foundation。

静态生成应用

静态生成应用程序是借助静态站点生成器预先生成的，并作为静态 HTML 页面存储在托管服务器上。Nuxt 自带一个 nuxt generate 命令，可以开箱即用地从你在 Nuxt 中开发的通用 SSR 或 SPA 应用程序生成静态页面。它在构建步骤中为你的每个路由将 HTML 页面预渲染到生成的 /dist/ 文件夹中，如下所示：

-| dist/
----| index.html
----| favicon.ico
----| about/
------| index.html
----| contact/
------| index.html
----| _nuxt/
------| 2d3427ee2a5aa9ed16c9.js
------| ...

你可以将这些静态文件部署到静态托管服务器，而无需 Node.js 或任何服务器端支持。因此，当应用程序最初在浏览器上加载时——无论你请求哪个路由——你总是会立即获得完整的内容（如果它已从通用 SSR 应用程序导出），并且之后该应用程序将像传统的 SPA 一样运行。

让我们来看看这些类型的应用程序的优点和缺点。

优点

  • 快速的初始加载时间：由于每个路由都预先生成为包含自身内容的静态 HTML 页面，因此在浏览器上加载速度很快。

  • 良好的 SEO：静态生成的 Web 应用程序允许搜索引擎完美地抓取你的 JavaScript 应用程序，就像传统的服务器端渲染应用程序一样。

  • 更简单的部署：由于静态生成的 Web 应用程序只是静态文件，因此可以轻松地将其部署到 GitHub Pages 等静态托管服务器。

缺点

  • 没有服务器端支持：由于静态生成的 Web 应用程序只是静态 HTML 页面并且仅在客户端运行，这意味着没有对 Nuxt 的 nuxtServerInit action 方法和仅在服务器端可用的 Node.js HTTP 请求和响应对象的运行时支持。所有数据将在构建步骤中预渲染。

  • 没有实时渲染：静态生成的 Web 应用程序适用于仅服务于构建时预渲染的静态页面的应用程序。如果你正在开发一个需要从服务器进行实时渲染的复杂应用程序，那么你可能应该使用通用 SSR 来充分利用 Nuxt 的强大功能。

从这些类别中，你可能已经发现 Nuxt 符合通用 SSR 应用程序和静态生成应用程序。除此之外，它也符合单页应用程序，但与传统的 SPA 不同，你将在第十五章 “使用 Nuxt 创建 SPA” 中了解更多相关信息。

现在，让我们更好地了解 Nuxt，以及你将在本书中创建的应用程序类型。我们将从 Nuxt 作为通用 SSR 应用程序开始。