JavaScript server side rendering (SSR) module interface for BEAR.Sunday
- php7.1
- V8Js (Optional)
composer require bear/ssr-module
$buildDir = dirname(__DIR__, 2) . '/var/www/build';
$this->install(new SsrModule($buildDir, 'index_ssr');In this canse, you need to place index_ssr.bundle.js file at $baseDir directory. This JS is used server side rendring (SSR) only.
/**
* @Ssr(app="index_ssr")
*/
public function onGet()
{
$this->body = [
'name' => 'World'
];
return $this;
}Annotate @Ssr at the method where you want to SSR. Set JS application name to app.
Here is a very minimalistic JS application. Export render function to render.
Use koriym/js-ui-skeletom to create Javascript UI application.
const render = state => (
`Hello ${state.name}`
)In SSR application, you sometime want to deal two kind of data. One is for client side which means you are OK to be a public in HTML. One is server side only.
You can separate state and meta data by custom attribute in @Ssr annotation.
metas are only used in server side.
/**
* @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;