PHPackages webiik/ssr - 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. webiik/ssr ActiveLibrary[Templating & Views](/categories/templating) webiik/ssr ========== Server-side rendering of javascript UI components from PHP. 1.1(4y ago)0622MITPHPPHP >=7.2 Since Jun 16Pushed 4y ago1 watchersCompare [ Source](https://github.com/webiik/ssr)[ Packagist](https://packagist.org/packages/webiik/ssr)[ Docs](https://www.webiik.com)[ RSS](/packages/webiik-ssr/feed)WikiDiscussions master Synced 1w ago READMEChangelogDependenciesVersions (3)Used By (2) [![](https://camo.githubusercontent.com/a397347ee4fb199934fee6354504f4702b89f5c22f0ce0ba94c5ff691cde545c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f77656269696b2f77656269696b2e737667)](https://camo.githubusercontent.com/a397347ee4fb199934fee6354504f4702b89f5c22f0ce0ba94c5ff691cde545c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f77656269696b2f77656269696b2e737667)[![](https://camo.githubusercontent.com/20f4b99a958aadb02ff273ac6428c17cf55c6b817657ed64b1c39c7f71955a0e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646570656e64656e636965732d302d627269676874677265656e2e737667)](https://camo.githubusercontent.com/20f4b99a958aadb02ff273ac6428c17cf55c6b817657ed64b1c39c7f71955a0e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646570656e64656e636965732d302d627269676874677265656e2e737667) SSR === [](#ssr) Server-side rendering of javascript UI components from PHP. Out of the box, it supports React, however you can add any JS UI library. Prerequisites ------------- [](#prerequisites) 1. [Composer](https://getcomposer.org) 2. [NodeJS](https://nodejs.org/en/) 3. (optional) [PHPV8JS](https://github.com/phpv8/v8js) 4. Some JS bundler eg. [Webpack](https://webpack.js.org) Supports -------- [](#supports) JS engines: - [NodeJS](https://nodejs.org/en/) - [PHP v8js](https://github.com/phpv8/v8js) - Custom JS engines. UI libraries: - [React](https://reactjs.org) - Custom UI library. Step-by-step Example -------------------- [](#step-by-step-example) This example uses Webpack to bundle JS. You can use your favorite JS bundler. 1. Create the `MyTest` folder with the following file structure. ``` . .. ├── package.json ├── webpack.config.js ├── meow.jsx ├── index.js └── index.php ``` 2. Inside `MyTest` folder install all necessary packages. ``` npm install react npm install react-dom npm install @webiik/render-js-components composer require webiik/ssr ``` 3. Create a component. Edit `meow.jsx` to: ``` import * as React from 'react'; export const Meow = (props) => { return (Meow {props.name}!); } ``` 4. Register the component. Edit `index.js` to: ``` import {registerReactComponent} from '@webiik/render-js-components'; import {Meow} from 'meow'; registerReactComponent({Meow}); ``` 5. Configure Webpack. Edit `webpack.config.js` to: ``` const webpack = require('webpack'); const path = require('path'); module.exports = { entry: { 'index': 'index.js' }, output: { filename: '[name].js', path: path.resolve(__dirname + '/build/') }, resolve: { extensions: ['.js', '.jsx'] } }; ``` 6. Bundle `index.js` to `build/index.js`. *Remember, `build/index.js` MUST contain all code dependencies required to render the component with javascript.* ``` webpack -p --colors --progress ``` 7. Render the component from PHP. Edit `index.php` to: ``` // Render the component on server $ssr = new \Webiik\Ssr\Ssr(); $engine = new \Webiik\Ssr\Engines\NodeJs(); $engine->setTmpDir(__DIR__); $ssr->useEngine($engine); $html = $ssr->render('build/index.js', 'Meow', ['name' => 'Dolly'], [ 'ssr' => true, ]); // Load JS libs on client echo ''; // Print server-side rendered component on client echo $html; ``` Cache ----- [](#cache) You can use cache to store rendered components. ``` // To enable cache you MUST set cache dir and add 'cache' key to $renderOptions. // To prevent cache conflicts cache key MUST be unique. $ssr->setCacheDir(__DIR__); $html = $ssr->render('index.js', 'Meow', ['name' => 'Dolly'], [ 'ssr' => true, 'cache' => 'Meow', 'expires' => 1, // 1 = one hour, 0 = never expires ]); ``` Custom UI library ----------------- [](#custom-ui-library) SSR supports React out of the box, however, you can add support for your favorite UI library. 1. JS - Create a component registrar. Use [registerReactComponent.tsx](Js/src/registerReactComponent.tsx) as template. The purpose of component registrar is to register function that renders component on a server and client. 2. PHP - Use method `setFwJsMask()` to tell SSR how to call the component registrar from step 1. ``` $ssr->setFwJsMask('vue', 'window.WebiikVue.%1$s("%2$s", "%3$s", "%4$s")'); ``` 3. PHP - Tell SSR that you want to use the component registrar from step 2. ``` $ssr->setDefaultFramework('vue'); ``` or ``` $html = $ssr->render('index.js', 'Meow', ['name' => 'Dolly'], [ 'fw' => 'vue', ]); ``` > If you need it. You can use more UI libraries at once. Custom JS engine ---------------- [](#custom-js-engine) The engine is a PHP class that processes JS and returns the result as a string. The engine MUST implement [EngineInterface](Engines/EngineInterface.php). See the code of [current engines](Engines) to learn more. 1. PHP - Create your engine. 2. PHP - Tell SSR to use your engine. ``` $ssr->useEngine(new YourCustomEngine()); ``` Resources --------- [](#resources) - [Webiik framework](https://github.com/webiik/webiik) - [Report issue](https://github.com/webiik/components/issues) ### Health Score 25 — LowBetter than 37% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community11 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~381 days Total 2 Last Release 1780d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/1226362d003d186b45e7dfa44489c36af37196c6a1b476206700eaf4e9c96a5a?d=identicon)[Jiri Mihal](/maintainers/Jiri%20Mihal) --- Top Contributors [![Jiri-Mihal](https://avatars.githubusercontent.com/u/10408123?v=4)](https://github.com/Jiri-Mihal "Jiri-Mihal (14 commits)") --- Tags javascriptJSreactvueSSRserver-side-rendering ### Embed Badge ![Health badge](/badges/webiik-ssr/health.svg) ``` [![Health](https://phpackages.com/badges/webiik-ssr/health.svg)](https://phpackages.com/packages/webiik-ssr) ``` ### Alternatives [jmikola/js-assets-helper-bundle Exposes the AssetsHelper service from Symfony2's templating component to JavaScript, allowing relative or absolute asset URI's to be generated client-side. 1912.6k](/packages/jmikola-js-assets-helper-bundle)[tarunkorat/laravel-asset-cleaner Safely detect and remove unused CSS, JS, SCSS and other assets from Laravel applications 733.2k1](/packages/tarunkorat-laravel-asset-cleaner)[carbon/pipeline Ultra-fast build stack for Neos CMS based on esbuild and PostCSS 1725.5k1](/packages/carbon-pipeline)[koriym/baracoa A JavaScript server side rendering interface 123.9k1](/packages/koriym-baracoa) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)