Nuxt 作为通用 SSR 应用

多年前，我们使用 ASP、Java、服务器端 JavaScript、PHP 和 Python 等服务器端脚本语言，通过模板引擎来创建传统服务器端应用程序以渲染应用程序的视图。这导致了我们在上一节中讨论的紧密耦合的缺点。

因此，随着 Nuxt、Next (https://nextjs.org/) 和 Angular Universal (https://angular.io/guide/universal) 等通用 SSR 框架的兴起，我们可以充分利用它们的功能，通过替换模板引擎（如 Pug (https://pugjs.org/)、Handlebars (https://handlebarsjs.com/)、Twig (https://twig.symfony.com/) 等我们一直深度依赖的工具），彻底将视图与服务器端脚本应用程序分离。如果我们将 Nuxt 视为前端服务器端应用程序，将 Express（或其他）视为后端服务器端应用程序，我们可以看到它们如何完美地互补。例如，我们可以使用 Express 创建一个后端服务器端应用程序，在 localhost:4000 的 API 路由（例如，/）上以 JSON 格式提供数据：

{
  "message": "Hello World"
}

然后，在前端服务器端，我们可以使用运行在 localhost:3000 上的 Nuxt 作为通用 SSR 应用程序，通过从我们的 Nuxt 应用程序的页面发送 HTTP 请求来使用上述数据，如下所示：

// pages/index.vue
async asyncData ({ $http }) {
  const { message } = await $http.$get('http://127.0.0.1:4000')
  return { message }
}

现在，Nuxt 既是处理我们应用程序视图和模板的服务器，又是客户端，而 Express 仅处理我们的服务器端逻辑。我们不再需要模板引擎来呈现我们的内容。因此，也许这一次我们不需要学习如此多的模板引擎，也不需要担心它们之间的竞争，因为我们现在拥有通用的解决方案——Nuxt。

我们将在第十二章 “创建用户登录和 API 认证” 中向你展示如何使用 Nuxt 和 Koa（另一个类似于 Express 的 Node.js 服务器端框架）创建跨域应用程序。

请注意，在前面的代码中，我们使用了 Nuxt HTTP 模块来发出 HTTP 请求。但是，在本书中，我们主要使用原生的 Axios 或 Nuxt Axios 模块进行 HTTP 请求。有关 Nuxt HTTP 模块的更多信息，请访问 https://http.nuxtjs.org/。

你还可以使用 Nuxt Content 模块作为无头 CMS，以便你可以从存储在你的 Nuxt 项目 “本地” 的 Markdown、JSON、YAML、XML 和 CSV 文件中提供你的应用程序内容。但是，在本书中，我们将使用和创建外部 API 来提供我们的内容，以避免最初在传统服务器端应用程序中发现的紧密耦合问题。有关 Nuxt Content 模块的更多信息，请访问 https://content.nuxtjs.org/ 。