前端 + 服务端实战：Hapi + Vue 实现 SSR-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，越来越多的网站开始采用服务端渲染（Server Side Rendering，简称 SSR）技术来提高网站的性能和用户体验。在 SSR 中，前端代码会在服务端执行，并将生成的 HTML 直接返回给客户端，这样可以减少客户端的渲染时间，提高页面的响应速度和搜索引擎优化（SEO）效果。

本文将介绍如何使用 Hapi 和 Vue 实现 SSR，包括如何在服务端渲染 Vue 组件，并将其集成到 Hapi 中。本文的内容详细且有深度和学习以及指导意义，适合有一定前端和服务端开发经验的读者。

环境准备

在开始实现 SSR 前，我们需要准备好以下环境：

Node.js 和 npm：Hapi 和 Vue 都需要 Node.js 环境，可以从官网 https://nodejs.org/ 下载安装包进行安装。
Hapi 和相关插件：Hapi 是一个 Node.js 的 Web 框架，可以使用 npm 安装，同时需要安装 Inert 和 Vision 插件，用于处理静态文件和模板渲染。
Vue 和相关插件：Vue 是一个流行的前端框架，可以使用 npm 安装，同时需要安装 vue-server-renderer 插件，用于服务端渲染 Vue 组件。

安装 Hapi 和相关插件的命令如下：

npm install hapi inert vision

安装 Vue 和相关插件的命令如下：

npm install vue vue-server-renderer

实现步骤

1. 创建 Hapi 服务器

首先，我们需要创建一个 Hapi 服务器，用于处理客户端的请求，并返回渲染好的 HTML。创建 Hapi 服务器的代码如下：

// javascriptcn.com 代码示例
const Hapi = require('hapi');
const Inert = require('inert');
const Vision = require('vision');

const server = Hapi.server({
    port: 3000,
    host: 'localhost'
});

const init = async () => {
    await server.register(Inert);
    await server.register(Vision);

    await server.start();
    console.log(`Server running at: ${server.info.uri}`);
};

process.on('unhandledRejection', (err) => {
    console.log(err);
    process.exit(1);
});

init();

在上面的代码中，我们首先引入了 Hapi、Inert 和 Vision 模块，然后创建了一个 Hapi 服务器，并设置了服务器的端口和主机地址。接着，我们使用 server.register 方法注册了 Inert 和 Vision 插件，用于处理静态文件和模板渲染。最后，我们启动了服务器，并在控制台输出服务器的地址。

2. 创建 Vue 组件

接下来，我们需要创建一个 Vue 组件，用于渲染页面的内容。在本文中，我们以一个简单的计数器组件为例，代码如下：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>计数器</h1>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

在上面的代码中，我们创建了一个计数器组件，包含一个标题、一个计数器和一个增加按钮。当用户点击增加按钮时，计数器的值会增加。

3. 创建服务端渲染函数

接下来，我们需要创建一个服务端渲染函数，用于将 Vue 组件渲染成 HTML。在本文中，我们使用 Vue 的官方渲染器 createRenderer 来实现服务端渲染，代码如下：

// javascriptcn.com 代码示例
const Vue = require('vue');
const { createRenderer } = require('vue-server-renderer');

const renderer = createRenderer();

const render = async (component, context) => {
    const app = new Vue({
        data: {
            url: context.url
        },
        render: h => h(component)
    });

    try {
        const html = await renderer.renderToString(app);
        return html;
    } catch (err) {
        console.log(err);
        return null;
    }
};

在上面的代码中，我们首先引入了 Vue 和 vue-server-renderer 模块，并使用 createRenderer 方法创建了一个渲染器。接着，我们定义了一个 render 函数，该函数接受一个 Vue 组件和一个上下文对象作为参数，并返回渲染好的 HTML。

在 render 函数中，我们首先创建了一个 Vue 实例，并将组件作为参数传递给 render 方法。同时，我们还将上下文对象中的 URL 存储在 Vue 实例的 data 属性中，以便在组件中使用。最后，我们调用渲染器的 renderToString 方法将 Vue 实例渲染成 HTML，并返回结果。

4. 处理客户端请求

最后，我们需要处理客户端的请求，并将渲染好的 HTML 返回给客户端。在本文中，我们使用 Hapi 的路由机制来处理请求，代码如下：

server.route({
    method: 'GET',
    path: '/{param*}',
    handler: async (request, h) => {
        const html = await render(Counter, { url: request.url });
        return h.view('index', { html });
    }
});

在上面的代码中，我们使用 server.route 方法创建了一个路由，该路由匹配所有的 GET 请求，并将请求的 URL 作为上下文对象的参数传递给 render 函数。接着，我们调用 render 函数将 Counter 组件渲染成 HTML，并将结果作为数据传递给 Hapi 的视图模板。最后，我们返回渲染好的 HTML 给客户端。

为了使 Hapi 能够正确渲染 HTML，我们还需要创建一个视图模板，代码如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SSR Demo</title>
  </head>
  <body>
    {{{ html }}}
  </body>
</html>

在上面的代码中，我们定义了一个 HTML 页面，包含一个标题和一个占位符，占位符将在 Hapi 中被渲染成渲染好的 HTML。

示例代码

最终的实现代码如下：

// javascriptcn.com 代码示例
const Hapi = require('hapi');
const Inert = require('inert');
const Vision = require('vision');
const Vue = require('vue');
const { createRenderer } = require('vue-server-renderer');

const server = Hapi.server({
    port: 3000,
    host: 'localhost'
});

const renderer = createRenderer();

const Counter = require('./Counter.vue');

const render = async (component, context) => {
    const app = new Vue({
        data: {
            url: context.url
        },
        render: h => h(component)
    });

    try {
        const html = await renderer.renderToString(app);
        return html;
    } catch (err) {
        console.log(err);
        return null;
    }
};

server.route({
    method: 'GET',
    path: '/{param*}',
    handler: async (request, h) => {
        const html = await render(Counter, { url: request.url });
        return h.view('index', { html });
    }
});

const init = async () => {
    await server.register(Inert);
    await server.register(Vision);

    server.views({
        engines: {
            html: require('handlebars')
        },
        relativeTo: __dirname,
        path: 'views'
    });

    await server.start();
    console.log(`Server running at: ${server.info.uri}`);
};

process.on('unhandledRejection', (err) => {
    console.log(err);
    process.exit(1);
});

init();

其中，Counter.vue 文件的内容为：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>计数器</h1>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

总结

本文介绍了如何使用 Hapi 和 Vue 实现 SSR，包括创建 Hapi 服务器、创建 Vue 组件、创建服务端渲染函数、处理客户端请求等步骤。通过本文的学习，读者可以了解 SSR 的基本原理和实现方式，掌握使用 Hapi 和 Vue 实现 SSR 的方法和技巧。同时，本文的示例代码也可以作为读者学习和实践 SSR 的参考。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65798796d2f5e1655d391d13