guansunyata/server-side-rendering

在PHP应用程序中实现服务器端渲染的JavaScript

0.3.1 2018-11-19 03:00 UTC

README

Latest Version on Packagist Build Status SensioLabsInsight Quality Score Total Downloads

use Spatie\Ssr\Renderer;
use Spatie\Ssr\Engines\V8;

$engine = new V8();

$renderer = new Renderer($engine);

echo $renderer
    ->entry(__DIR__.'/../../public/js/app-server.js')
    ->render();

// <div>My server rendered app!</div>
  • 与任何允许服务器端渲染的JavaScript框架兼容
  • 与或不使用V8Js PHP扩展一起运行
  • 需要最少的配置

如果您正在构建Laravel应用程序,请查看laravel-server-side-rendering包。

本readme假定您已经对构建服务器渲染的JavaScript应用程序有所了解。

本包适用于谁?

服务器端渲染(SSR)在JavaScript应用程序中可能很复杂,启用起来可能很繁琐。在开始使用此库之前,请确保您知道您要做什么。Alex Grigoryan有一篇关于SSR的好处和注意事项的简洁的文章。Anthony Gore也有一篇关于在Laravel中服务器端渲染Vue应用程序的精彩文章,这激发了此库的灵感。

如果您需要复习...

  • SSR可以减少直到第一次有意义的绘制的时间,为用户提供更好的体验
  • 如果您需要针对无法执行JavaScript的爬虫定制应用程序,则建议使用SSR(SEO)
  • SSR会给您的应用程序增加相当多的复杂性
  • SSR可能会增加响应时间和服务器总负载

在回答了“我是否需要SSR?”的问题后,请考虑您是否需要在PHP应用程序中使用SSR。在PHP运行时渲染应用程序的好处包括

  • 访问您的应用程序的会话和状态,这通常是您在SPA消耗无状态API时无法访问的
  • 减少基础设施复杂性,因为您不需要维护一个Node服务器

如果您正在构建一个连接到外部API的SPA,并且PHP运行时不提供任何额外价值,那么您可能更愿意使用Next.jsNuxt.js等经过实战考验的解决方案。

作为最后的声明,根据人们在博客中关于在PHP中渲染JavaScript应用程序的讨论数量——好吧,实际上没有——这个设置是未知的领域。可能会有更多未知的陷阱潜伏在拐角处。

如果您仍然确定要继续,请继续!

安装

您可以通过composer安装此包

composer require spatie/server-side-rendering

用法

您的JavaScript应用程序的架构

本指南假定您已经知道如何构建服务器端渲染的应用程序。如果您想查找有关此主题的阅读材料,Vue.js有一个非常全面的指南关于SSR。它是Vue特定的,但这些概念也适用于React等其他框架。

引擎

引擎在服务器上执行JS脚本。此库包含两个引擎:一个包装了一些V8Js调用的V8引擎,因此您需要安装一个PHP扩展才能使用此引擎,以及一个构建运行时节点脚本并在新进程中执行它的Node引擎。一个引擎可以运行一个脚本,也可以运行多个脚本的数组。

V8引擎是V8Js类的轻量级包装。您需要安装v8js扩展才能使用此引擎。

Node 引擎会写入一个临时文件,其中包含渲染您的应用程序所需的脚本,并在 node.js 进程中执行它。您需要安装 node.js 才能使用此引擎。

渲染选项

您可以在渲染应用程序之前链式调用任何数量的选项来控制显示方式。

echo $renderer
    ->disabled($disabled)
    ->context('user', $user)
    ->entry(__DIR__.'/../../public/js/app-server.js')
    ->render();

enabled(bool $enabled = true): $this

启用或禁用服务器端渲染。当禁用时,将渲染客户端脚本和回退 HTML。

debug(bool $debug = true): $this

当启用调试时,JavaScript 错误将引发 PHP 异常。在没有调试模式的情况下,将渲染客户端脚本和回退 HTML,以便从干净的画布重新渲染应用程序。

entry(string $entry): $this

您的服务器脚本的路径。此脚本的内容将在引擎中运行。

context($context, $value = null): $this

上下文作为 context 变量传递给服务器脚本。这对于填充应用程序的状态非常有用。上下文可以包含任何可 json 序列化的内容。

echo $renderer
    ->entry(__DIR__.'/../../public/js/app-server.js')
    ->context('user', ['name' => 'Sebastian'])
    ->render();
// app-server.js

store.user = context.user // { name: 'Sebastian' }

// Render the app...

上下文可以作为键值参数或作为数组传递。

$renderer->context('user', ['name' => 'Sebastian']);
$renderer->context(['user' => ['name' => 'Sebastian']]);

env($env, $value = null): $this

当服务器脚本执行时,环境变量放置在 process.env 中。环境变量必须是像数字、字符串或布尔值这样的原始值。

$renderer->env('NODE_ENV', 'production');
$renderer->env(['NODE_ENV' => 'production']);

fallback(string $fallback): $this

设置当服务器端渲染失败或禁用时使用的回退 HTML。您可以使用此选项来渲染一个容器,以便客户端脚本在其中重新渲染新鲜的应用程序。

$renderer->fallback('<div id="app"></div>');

resolveEntryWith(callable $resolver): $this

添加一个回调来在解析条目时转换它。这在创建渲染器时很有用,您不必在视图中处理复杂的路径。

echo $renderer
    ->resolveEntryWith(function (string $entry): string {
        return __DIR__."/../../public/js/{$entry}-server.js";
    })
    ->entry('app')
    ->render();

测试

composer test

更新日志

请参阅 更新日志 了解最近的变化信息。

贡献

请参阅 贡献指南 了解详细信息。

安全性

如果您发现任何安全相关的问题,请通过电子邮件 freek@spatie.be 而不是使用问题跟踪器。

Postcardware

您可以使用此包,但如果它进入您的生产环境,我们非常希望您从家乡给我们寄一张明信片,说明您正在使用我们的哪个包。

我们的地址是:Spatie,Samberstraat 69D,2060 安特卫普,比利时。

我们在我们的公司网站上发布所有收到的明信片 在这里

致谢

支持我们

Spatie 是一家总部位于比利时的安特卫普的网页设计公司。您可以在我们的网站上找到我们所有开源项目的概述 在这里

您的业务依赖于我们的贡献吗?请联系我们,在 Patreon 上支持我们。所有承诺都将专门用于分配人力资源以维护和新奇事物。

许可

MIT 许可证 (MIT)。请参阅 许可文件 了解更多信息。