使用 PHP 来作 Vue.js 的 SSR 服务端渲染

时间  2019-11-07
标签 使用 php 来作 vue.js vue ssr 服务 渲染 栏目 PHP 繁體版
原文   原文链接

file
对于客户端应用来讲，服务端渲染是一个热门话题。然而不幸的是，这并非一件容易的事，尤为是对于不用 Node.js 环境开发的人来讲。html

我发布了两个库让 PHP 从服务端渲染成为可能.spatie/server-side-rendering 和 spatie/laravel-server-side-rendering适配 laravel 应用。vue

让咱们一块儿来仔细研究一些服务端渲染的概念，权衡优缺点，而后遵循第一法则用 PHP 创建一个服务端渲染。node

什么是服务端渲染

一个单页应用（一般也叫作 SPA ）是一个客户端渲染的 App 。这是一个仅在浏览器端运行的应用。若是你正在使用框架，好比 React， Vue.js 或者 AngularJS ，客户端将从头开始渲染你的 App 。laravel

浏览器的工做

在 SPA 被启动并准备使用以前，浏览器须要通过几个步骤。git

  • 下载 JavaScript 脚本
  • 解析 JavaScript 脚本
  • 运行 JavaScript 脚本
  • 取回数据（可选，但广泛）
  • 在本来的空容器渲染应用  （首次有意义的渲染）
  • 准备完成！ （能够交互啦）

用户不会看到任何有意义的内容，直到浏览器彻底渲染 App（须要花费一点时间）。这会形成一个明显的延迟，直到 首次有意义的渲染 完成，从而影响了用户体验。github

这就是为何服务端渲染（通常被称做 SSR ）登场的缘由。SSR 在服务器预渲染初始应用状态。这里是浏览器在使用服务端渲染后须要通过的步骤：web

  • 渲染来自服务端的 HTML （首次有意义的渲染）
  • 下载 JavaScript 脚本
  • 解析 JavaScript 脚本
  • 运行 JavaScript 脚本
  • 取回数据
  • 使已存在的 HTML 页面可交互
  • 准备完成！ (能够交互啦)

因为服务器提供了 HTML 的预渲染块，所以用户无需等到一切完成后才能看到有意义的内容。注意，虽然 交互时间 仍然处于最后，但可感知的表现获得了巨大的提高。后端

服务端渲染的优势

服务端渲染的主要优势是能够提高用户体验。而且，若是你的网站须要应对不能执行 JavaScript 的老旧爬虫，SSR 将是必须的，这样，爬虫才能索引服务端渲染事后的页面，而不是一个空荡荡的文档。浏览器

服务端如何渲染？

记住服务端渲染并不是微不足道，这一点很重要。当你的 Web 应用同时运行在浏览器和服务器，而你的 Web 应用依赖 DOM 访问，那么你须要确保这些调用不会在服务端触发，由于没有 DOM API 可用。服务器

基础设施复杂性

假设你决定了服务端渲染你的应用端程序，你若是正在阅读这篇文章，很大可能正在使用 PHP 构建应用的大部分（功能）。可是，服务端渲染的 SPA 须要运行在 Node.js 环境，因此将须要维护第二个程序。

你须要构建两个应用程序之间的桥梁，以便它们进行通讯和共享数据：须要一个 API。构建无状态 API 相比于构建有状态是比较 困难 的。你须要熟悉一些新概念，例如基于 JWT 或 OAUTH 的验证，CORS，REST ，添加这些到现有应用中是很重要的。

有得必有所失，咱们已经创建了 SSR 以增长 Web 应用的用户体验，但 SSR 是有成本的。

服务器端渲染权衡取舍

服务器上多了一个额外的操做。一个是服务器增长了负载压力，第二个是页面响应时间也会稍微加长。 不过由于如今服务器返回了有效内容，在用户看来，第二个问题的影响不大。

大部分时候你会使用 Node.js 来渲染你的 SPA 代码。若是你的后端代码不是使用 Javascript 编写的话，新加入 Node.js 堆栈将使你的程序架构变得复杂。

为了简化基础架构的复杂度， 咱们须要找到一个方法，使已有的 PHP 环境做为服务端来渲染客户端应用。

在 PHP 中渲染 JavaScript

在服务器端渲染 SPA 须要集齐如下三样东西：

  • 一个能够执行 JavaScript 的引擎
  • 一个能够在服务器上渲染应用的脚本
  • 一个能够在客户端渲染和运行应用的脚本

SSR scripts 101

下面的例子使用了 Vue.js。你若是习惯使用其它的框架（例如 React），没必要担忧，它们的核心思想都是相似的，一切看起来都是那么类似。

简单起见，咱们使用经典的 “ Hello World ” 例子。

下面是程序的代码（没有 SSR）：

// app.js
import Vue from 'vue'

new Vue({
  template: `
    <div>Hello, world!</div>
  `,

  el: '#app'
})

这短代码实例化了一个 Vue 组件，而且在一个容器（id 值为 app 的 空 div）渲染。

若是在服务端运行这点脚本，会抛出错误，由于没有 DOM 可访问，而 Vue 却尝试在一个不存在的元素里渲染应用。

重构这段脚本，使其 能够 在服务端运行。

// app.js
import Vue from 'vue'

export default () => new Vue({
  template: `
    <div>Hello, world!</div>
  `
})

// entry-client.js
import createApp from './app'

const app = createApp()

app.$mount('#app')

咱们将以前的代码分红两部分。app.js 做为建立应用实例的工厂，而第二部分，即 entry-client.js，会运行在浏览器，它使用工厂建立了应用实例，而且挂载在 DOM。

如今咱们能够建立一个没有 DOM 依赖性的应用程序，能够为服务端编写第二个脚本。

// entry-server.js
import createApp from './app'
import renderToString from 'vue-server-renderer/basic'

const app = createApp()

renderToString(app, (err, html) => {
  if (err) {
    throw new Error(err)
  }
  // Dispatch the HTML string to the client...
})

咱们引入了相同的应用工厂，但咱们使用服务端渲染的方式来渲染纯 HTML 字符串，它将包含应用初始状态的展现。

咱们已经具有三个关键因素中的两个：服务端脚本和客户端脚本。如今，让咱们在 PHP 上运行它吧！

执行 JavaScript

在 PHP 运行 JavaScript，想到的第一个选择是 V8Js。V8Js 是嵌入在 PHP 扩展的 V8 引擎，它容许咱们执行 JavaScript。

使用 V8Js 执行脚本很是直接。咱们能够用 PHP 中的输出缓冲和 JavaScript 中的 print 来捕获结果。

$v8 = new V8Js();

ob_start();

// $script 包含了咱们想执行的脚本内容

$v8->executeString($script);

echo ob_get_contents();
print('<div>Hello, world!</div>')

这种方法的缺点是须要第三方 PHP 扩展，而扩展可能很难或者不能在你的系统上安装，因此若是有其余（不须要安装扩展的）方法，它会更好的选择。

这个不同的方法就是使用 Node.js 运行 JavaScript。咱们能够开启一个 Node 进程，它负责运行脚本而且捕获输出。
Symfony 的 Process 组件就是咱们想要的。

use Symfony\Component\Process\Process;

// $nodePath 是可执行的 Node.js 的路径
// $scriptPath 是想要执行的 JavaScript 脚本的路径

new Process([$nodePath, $scriptPath]);

echo $process->mustRun()->getOutput();
console.log('<div>Hello, world!</div>')

注意，（打印）在 Node 中是调用 console.log 而不是 print 。

让咱们一块儿来实现它吧！

spatie/server-side-rendering 包的其中一个关键理念是 引擎 接口。引擎就是上述 JavaScript 执行的一个抽象概念。

namespace Spatie\Ssr;

/**
 * 建立引擎接口。
 */
interface Engine
{
    public function run(string $script): string;
    public function getDispatchHandler(): string;
}

run 方法预期一个脚本的输入 （脚本 内容，不是一条路径），而且返回执行结果。 getDispatchHandler 容许引擎声明它预期脚本如何展现发布。例如 V8 中的print 方法，或是 Node 中的 console.log 。

V8Js 引擎实现起来并非很花俏。它更相似于咱们上述理念的验证，带有一些附加的错误处理机制。

namespace Spatie\Ssr\Engines;

use V8Js;
use V8JsException;
use Spatie\Ssr\Engine;
use Spatie\Ssr\Exceptions\EngineError;

/**
 * 建立一个 V8 类来实现引擎接口类 Engine 。
 */
class V8 implements Engine。
{
    /** @var \V8Js */
    protected $v8;

    public function __construct(V8Js $v8)
    {
        $this->v8 = $v8;
    }

    /**
     * 打开缓冲区。
     * 返回缓冲区存储v8的脚本处理结果。
     */
    public function run(string $script): string
    {
        try {
            ob_start();

            $this->v8->executeString($script);

            return ob_get_contents();
        } catch (V8JsException $exception) {
            throw EngineError::withException($exception);
        } finally {
            ob_end_clean();
        }
    }

    public function getDispatchHandler(): string
    {
        return 'print';
    }
}

注意这里咱们将 V8JsException 从新抛出做为咱们的 EngineError。 这样咱们就能够在任何的引擎视线中捕捉相同的异常。

Node 引擎会更加复杂一点。不像 V8Js，Node 须要 文件 去执行，而不是脚本内容。在执行一个服务端脚本前，它须要被保存到一个临时的路径。

namespace Spatie\Ssr\Engines;

use Spatie\Ssr\Engine;
use Spatie\Ssr\Exceptions\EngineError;
use Symfony\Component\Process\Process;
use Symfony\Component\Process\Exception\ProcessFailedException;

/**
 * 建立一个 Node 类来实现引擎接口类 Engine 。
 */
class Node implements Engine
{
    /** @var string */
    protected $nodePath;

    /** @var string */
    protected $tempPath;

    public function __construct(string $nodePath, string $tempPath)
    {
        $this->nodePath = $nodePath;
        $this->tempPath = $tempPath;
    }

    public function run(string $script): string
    {
        // 生成一个随机的、独一无二的临时文件路径。
        $tempFilePath = $this->createTempFilePath();

        // 在临时文件中写进脚本内容。
        file_put_contents($tempFilePath, $script);

        // 建立进程执行临时文件。
        $process = new Process([$this->nodePath, $tempFilePath]);

        try {
            return substr($process->mustRun()->getOutput(), 0, -1);
        } catch (ProcessFailedException $exception) {
            throw EngineError::withException($exception);
        } finally {
            unlink($tempFilePath);
        }
    }

    public function getDispatchHandler(): string
    {
        return 'console.log';
    }

    protected function createTempFilePath(): string
    {
        return $this->tempPath.'/'.md5(time()).'.js';
    }
}

除了临时路径步骤以外，实现方法看起来也是至关直截了当。

咱们已经建立好了 Engine 接口，接下来须要编写渲染的类。如下的渲染类来自于 spatie/server-side-rendering 扩展包，是一个最基本的渲染类的结构。

渲染类惟一的依赖是 Engine 接口的实现：

class Renderer
{
    public function __construct(Engine $engine)
    {
        $this->engine = $engine;
    }
}

渲染方法 render 里将会处理渲染部分的逻辑，想要执行一个 JavaScript 脚本文件，须要如下两个元素：

  • 咱们的应用脚本文件；
  • 一个用来获取解析产生的 HTML 的分发方法；

一个简单的 render 以下:

class Renderer
{
    public function render(string $entry): string
    {
        $serverScript = implode(';', [
            "var dispatch = {$this->engine->getDispatchHandler()}",
            file_get_contents($entry),
        ]);

        return $this->engine->run($serverScript);
    }
}

此方法接受  entry-server.js 文件路径做为参数。

咱们须要将解析前的 HTML 从脚本中分发到 PHP 环境中。dispatch 方法返回 Engine 类里的 getDispatchHandler 方法，dispatch 须要在服务器脚本加载前运行。

还记得咱们的服务器端入口脚本吗？接下来咱们在此脚本中调用咱们的  dispatch 方法：

// entry-server.js
import app from './app'
import renderToString from 'vue-server-renderer/basic'

renderToString(app, (err, html) => {
  if (err) {
    throw new Error(err)
  }
  dispatch(html)
})

Vue 的应用脚本无需特殊处理，只须要使用  file_get_contents 方法读取文件便可。

咱们已经成功建立了一个 PHP 的 SSR 。spatie/server-side-rendering 中的完整渲染器 Renderer 跟咱们实现有点不同，他们拥有更高的容错能力，和更加丰富的功能若有一套 PHP 和 JavaScript 共享数据的机制。若是你感兴趣的话，建议你阅读下源码 server-side-rendering 代码库 。

三思然后行

咱们弄清楚了服务器端渲染的利和弊，知道 SSR 会增长应用程序架构和基础结构的复杂度。若是服务器端渲染不能为你的业务提供任何价值，那么你可能不该该首先考虑他。

若是你 确实 想开始使用服务器端渲染，请先阅读应用程序的架构。大多数 JavaScript 框架都有关于 SSR 的深刻指南。Vue.js 甚至有一个专门的 SSR 文档网站，解释了诸如数据获取和管理用于服务器端渲染的应用程序方面的坑。

若是可能，请使用通过实战检验的解决方案

有许多通过实战检验的解决方案，能提供很好的 SSR 开发体验。好比，若是你在构建 React 应用，可使用 Next.js，或者你更青睐于 Vue 则可用 Nuxt.js，这些都是很引人注目的项目。

还不够？尝试 PHP 服务端渲染

你仅能以有限的资源来管理基础架构上的复杂性。你想将服务端渲染做为大型 PHP 应用中的一部分。你不想构建和维护无状态的 API。 若是这些缘由和你的状况吻合，那么使用 PHP 进行服务端渲染将会是个不错方案。

我已经发布两个库来支持 PHP 的服务端 JavaScript 渲染：  spatie/server-side-rendering  和专为 Laravel 应用打造的 spatie/laravel-server-side-rendering  。Laravel 定制版在 Laravel 应用中近乎 0 配置便可投入使用，通用版须要根据运行环境作一些设置调整。固然，详细内容能够参考软件包自述文件。

若是你仅是想体验，从 spatie/laravel-server-side-rendering-examples  检出项目并参考指南进行安装。

若是你考虑服务端渲染，我但愿这类软件包能够帮到你，并期待经过 Github 作进一步问题交流和反馈！

更多现代化 PHP 知识，请前往 Laravel / PHP 知识社区
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程