bear / ssr-module
Javascript SSR module for BEAR.Sunday
Requires
- php: >=7.1.0
- bear/resource: ^1.4
- koriym/baracoa: ^1.0
Requires (Dev)
- bear/qatools: ^1.2
- phpv8/v8js-stubs: ^1.3.1
- symfony/cache: ^v3.3.0-BETA1
This package is auto-updated.
Last update: 2024-10-09 14:23:20 UTC
README
JavaScript server side rendering (SSR) module interface for BEAR.Sunday
Prerequisites
- php7.1
- V8Js (Optional)
Install
Composer Install
composer require bear/ssr-module
Module Install
$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 Annotation
Basic
/** * @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
.
JS Render Application
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}` )
State and metas
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;