spatie/server-side-rendering

在PHP应用程序中进行服务器端渲染JavaScript

0.3.2 2022-02-21 22:53 UTC

This package is auto-updated.

Last update: 2024-09-18 16:27:37 UTC


README

Latest Version on Packagist Build Status 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包。

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

支持我们

我们投入了大量资源来创建一流的开放式源代码包。您可以通过购买我们的付费产品之一来支持我们。

我们非常感谢您从家乡寄来明信片,提及您正在使用我们哪个包。您可以在我们的联系页面上找到我们的地址。我们将在我们的虚拟明信片墙上公布所有收到的明信片。

此包适用于谁?

服务器端渲染(SSR)在您的JavaScript应用程序中启用可能会很困难,并且是非平凡的。在开始使用此库之前,请确保您了解自己将要做什么。Alex Grigoryan有一篇相当简洁的文章,讲述了SSR的优缺点。Anthony Gore也有一篇关于在Laravel中渲染Vue应用程序的优秀文章,这激发了此库的灵感。

如果您需要复习...

  • SSR可以缩短直到首次有意义的绘制的时间,为用户提供更好的体验
  • 如果您需要为无法执行JavaScript的爬虫定制应用程序,则建议使用SSR
  • 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.js 的,但概念也适用于其他框架,如 React。

引擎

引擎在服务器上执行 JS 脚本。这个库包含两个引擎:一个包装了一些 V8Js 调用的 V8 引擎,因此您需要为这个引擎安装 PHP 扩展,以及一个在运行时构建 node 脚本并在新进程中执行它的 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

更新日志

有关最近更改的更多信息,请参阅更新日志

贡献

有关详细信息,请参阅贡献指南

安全

如果您发现有关安全性的错误,请通过security@spatie.be 发送邮件,而不是使用问题跟踪器。

明信片软件

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

我们的地址是:Spatie,Kruikstraat 22,2018 安特卫普,比利时。

我们在我们的公司网站上发布了所有收到的明信片(点击查看)

鸣谢

许可证

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