PHPackages                             koriym/baracoa - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. koriym/baracoa

ActiveLibrary[Templating & Views](/categories/templating)

koriym/baracoa
==============

A JavaScript server side rendering interface

1.2.0(5mo ago)123.9k22MITPHPPHP >=8.2CI failing

Since May 10Pushed 5mo ago2 watchersCompare

[ Source](https://github.com/koriym/Koriym.Baracoa)[ Packagist](https://packagist.org/packages/koriym/baracoa)[ RSS](/packages/koriym-baracoa/feed)WikiDiscussions 1.x Synced 4w ago

READMEChangelog (4)Dependencies (6)Versions (7)Used By (2)

Baracoa
=======

[](#baracoa)

[![CI](https://github.com/koriym/Koriym.Baracoa/actions/workflows/ci.yml/badge.svg)](https://github.com/koriym/Koriym.Baracoa/actions/workflows/ci.yml)

A JavaScript server side rendering interface for PHP.

**Baracoa** provides a simple interface for JavaScript server side rendering in PHP.

Prerequisites
-------------

[](#prerequisites)

- PHP 8.2+
- [V8Js](http://php.net/v8js) (optional, PhpExecJs used as fallback)

Installation
------------

[](#installation)

```
composer require koriym/baracoa
```

Basic
-----

[](#basic)

In a JS renderer application, implement `render` function which takes parameter(s) and return html string.

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

Call the `render()` method with JS app name and values to assign to redner.

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

In this example, you need to place `min.bundle.js` JS file in `$jsDir ` directory. Every page needs own JS view application which is bundled single file by bundler tool like [webpack](https://webpack.github.io/).

Typical entry file is like following code.

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

In next section we see the example of Redux with React applicaiton example.

Redux React
-----------

[](#redux-react)

### The Server Side

[](#the-server-side)

Inject an initial component HTML and initial state into a template to be rendered on the client side. To pass along the state, we add a `` tag that will attach `preloadedState` to `window.__PRELOADED_STATE__`. The preloadedState will then be available on the client side by accessing `window.__PRELOADED_STATE__`.

We also include our bundle file for the client-side application via a `` tag. This is whatever output your bundling tool provides for your client entry point.

### render.js

[](#renderjs)

```
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(

    ,
  );
  return `

        ${escape(metas.title)}

        ${root}

          window.__PRELOADED_STATE__ = ${serialize(preloadedState)}

`;
};

export default render;
```

`render()` method can pass second parameter as SSR meta data which is only available in server side rendering. Typically this value is used in `` such as for OGP.

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

### The Client Side

[](#the-client-side)

We need to do is grab the initial state from `window.__PRELOADED_STATE__` which is rendered in server side, and pass it to our `createStore()` function as the initial state.

```
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(

  ,
  document.getElementById('root'),
);
```

Performance boost
-----------------

[](#performance-boost)

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

An *external* "snapshot" is saved to increase performance in each app with `CacheBaracoa`. Highly recommended in production site. Consider *internal* snapshot for more performance.

See more detail in this blog post.

- [20x performance boost with V8Js snapshots](http://stesie.github.io/2016/02/snapshot-performance)

Run demo
--------

[](#run-demo)

### min

[](#min)

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

### handlebar

[](#handlebar)

```
cd docs/example/handlesbar
npm install
npm run build
php public/index.php
#
# ...
```

### redux react

[](#redux-react-1)

```
cd docs/example/redux
npm install
npm run build
npm start
```

Install V8Js
------------

[](#install-v8js)

### macOS

[](#macos)

Using [shivammathur/homebrew-extensions](https://github.com/shivammathur/homebrew-extensions):

```
brew install shivammathur/extensions/v8js@8.4
```

(Replace `8.4` with your PHP version)

### Linux

[](#linux)

See the [V8Js README](https://github.com/phpv8/v8js) for installation instructions.

JS UI Application Skeleton
--------------------------

[](#js-ui-application-skeleton)

[UiSkeleton](https://github.com/koriym/Koriym.JsUiSkeleton) is a Javascript UI application skeleton with hot module loader, browsersync, test, lint and more for development.

###  Health Score

52

—

FairBetter than 96% of packages

Maintenance72

Regular maintenance activity

Popularity27

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity80

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 97.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1059 days

Total

4

Last Release

159d ago

PHP version history (2 changes)1.0.0PHP >=7.1.0

1.1.0PHP >=8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/db4fc75ffc631168d0d7143b6f2c24b1534dfb921212bd851c026c5cbbb1344d?d=identicon)[koriym](/maintainers/koriym)

---

Top Contributors

[![koriym](https://avatars.githubusercontent.com/u/529021?v=4)](https://github.com/koriym "koriym (82 commits)")[![fiahfy](https://avatars.githubusercontent.com/u/7123916?v=4)](https://github.com/fiahfy "fiahfy (2 commits)")

---

Tags

htmljavascriptperformance-boostphpreduxsnapshotssrtemplate-enginev8jsjavascripttemplatingSSRv8

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/koriym-baracoa/health.svg)

```
[![Health](https://phpackages.com/badges/koriym-baracoa/health.svg)](https://phpackages.com/packages/koriym-baracoa)
```

###  Alternatives

[laravel/framework

The Laravel Framework.

34.8k532.1M19.5k](/packages/laravel-framework)[matomo/matomo

Matomo is the leading Free/Libre open analytics platform

21.6k38.2k](/packages/matomo-matomo)[moonshine/moonshine

Laravel administration panel

1.3k239.9k76](/packages/moonshine-moonshine)[civicrm/civicrm-core

Open source constituent relationship management for non-profits, NGOs and advocacy organizations.

751284.3k37](/packages/civicrm-civicrm-core)[shopware/core

Shopware platform is the core for all Shopware ecommerce products.

585.4M526](/packages/shopware-core)[ec-cube/ec-cube

EC-CUBE EC open platform.

78727.2k1](/packages/ec-cube-ec-cube)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)