README

JavaScript 服务器端渲染接口

Bracoa 为 PHP 中 JavaScript 服务器端渲染提供简单接口。

预先条件

php7.1
V8Js

安装

composer require koriym/baracoa

基础

在 JS 渲染器应用程序中，实现接受参数并返回 HTML 字符串的 render 函数。

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

使用 JS 应用程序名称和分配给渲染器的值调用 render() 方法。

$baracoa = new Baracoa($jsDir, new ExceptionHandler());
$html = $baracoa->render('min', ['name' => 'World']);
echo $html; // Hello World

在此示例中，您需要将 min.bundle.js JS 文件放置在 $jsDir 目录中。每个页面都需要自己的 JS 视图应用程序，该应用程序由打包工具（如 webpack）打包为单个文件。

典型的入口文件如下所示。

import render from './render';
global.render = render;

在下一节中，我们将看到 Redux 与 React 应用程序示例。

Redux React

服务器端

将初始组件 HTML 和初始状态注入到要在客户端渲染的模板中。为了传递状态，我们添加一个将 preloadedState附加到 window.__PRELOADED_STATE__ 的 <script> 标签。通过访问 window.__PRELOADED_STATE__，预加载状态将在客户端端可用。

我们还通过 <script> 标签包含客户端应用程序的打包文件。这是您的打包工具为您提供的客户端入口点的输出。

render.js

import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import escape from 'escape-html';
import serialize from 'serialize-javascript';
import App from '../containers/App';
import configureStore from '../store/configureStore';

const render = (preloadedState, metas) => {
  const store = configureStore(preloadedState);
  const root = renderToString(
    <Provider store={store}>
      <App />
    </Provider>,
  );
  return `<!doctype html>
    <html>
      <head>
        <title>${escape(metas.title)}</title>
      </head>
      <body>
        <div id="root">${root}</div>
        <script>
          window.__PRELOADED_STATE__ = ${serialize(preloadedState)}
        </script>
        <script src="/build/index.bundle.js"></script>
      </body>
    </html>
`;
};

export default render;

render() 方法可以将第二个参数作为仅适用于服务器端渲染的 SSR 元数据传递。通常此值用于 <header>，例如 OGP。

$meta = ['title => 'awesome page'];
$html = $baracoa->render('min', ['name' => 'World'], $meta);

客户端

我们需要做的就是从在服务器端渲染的 window.__PRELOADED_STATE__ 中获取初始状态，并将其作为初始状态传递给我们的 createStore() 函数。

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from '../store/configureStore';
import App from '../containers/App';

const preloadedState = window.__PRELOADED_STATE__;
const store = configureStore(preloadedState);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

性能提升

$cache = new FilesystemCache() // PSR-16
$baracoa = new CacheBaracoa($appBundleJsPath, new ExceptionHandler(), $cache);

使用 CacheBaracoa 将“外部”快照保存到每个应用程序中以提高性能。在生产网站上强烈推荐。考虑使用“内部”快照以获得更好的性能。

在此博客文章中了解更多详情。

使用 V8Js 快照实现 20 倍的性能提升

运行演示

min

git clone git@github.com:koriym/Koriym.Baracoa.git
cd Koriym.Baracoa
composer install
cd docs/example/min
php index.php
// HelloWorld

handlebar

cd docs/example/handlesbar
yarn install
yarn run build
php public/index.php

// <!doctype html>
// ...

redux react

cd docs/example/redux
yarn install
yarn run build
yarn start

安装 V8Js

OSX

brew update
brew install homebrew/php/php71-v8js

编辑 php.ini 或添加 'V8Js.ini'

extension="/usr/local/opt/php71-v8js/v8js.so"

JS UI 应用程序骨架

UiSkeleton 是一个具有热模块加载、browsersync、测试、lint 等功能，用于开发的 JavaScript UI 应用程序骨架。

koriym / baracoa

维护者

详细信息