README

BEAR.Sunday 的 JavaScript 服务器端渲染（SSR）模块接口

先决条件

php7.1
V8Js（可选）

安装

Composer 安装

composer require bear/ssr-module

模块安装

$buildDir = dirname(__DIR__, 2) . '/var/www/build';
$this->install(new SsrModule($buildDir, 'index_ssr');

在这种情况下，您需要将 index_ssr.bundle.js 文件放置在 $baseDir 目录中。这个 JS 只用于服务器端渲染（SSR）。

@Ssr 注解

基本

/**
 * @Ssr(app="index_ssr")
 */
public function onGet()
{ 
    $this->body = [
        'name' => 'World'
    ];

    return $this;
}

在您希望进行 SSR 的方法上注解 @Ssr。将 JS 应用程序名称设置为 app。

JS 渲染应用程序

这是一个非常简化的 JS 应用程序。导出 render 函数以进行渲染。使用 koriym/js-ui-skeletom 创建 JavaScript UI 应用程序。

const render = state => (
  `Hello ${state.name}`
)

状态和元数据

在 SSR 应用程序中，有时您需要处理两种类型的数据。一种是客户端数据，这意味着您可以将数据公开在 HTML 中。另一种是仅用于服务器端。

您可以通过 @Ssr 注解中的自定义属性来分离 state 和 meta 数据。metas 仅用于服务器端。

/**
 * @Ssr(
 *   app="index_ssr",
 *   state={"name", "age"},
 *   meta={"title"}
 * )
 */
public function onGet()
{ 
    $this->body = [
        'name' => 'World',
        'age' => 4.6E8;
        'title' => 'Age of the World'
    ];

    return $this;
}

render.js

const render = (preloadedState, metas) => {
  return
  `<html>
    <head>
      <title>${escape(metas.title)}</title>
    </head>
    <body>
      <script>window.__PRELOADED_STATE__ = ${serialize(preloadedState)}</script>
    <body>
  </html>`
};
export default render;

bear / ssr-module

维护者

详细信息