Rendering Engine 

SSR in PHP 

Rendering Engine  

SSR in PHP 

V8js  

PHP-v8js is a php extension embeds the Google V8 Javascript Engine

Rendering Engine  

SSR in PHP  

 Node.js 

JavaScript runtime built on V8 JavaScript engine

Bridge

between bridge and process

Bridge 

between bridge and process 

1. CREATE TEMPLATE FILE 

2. INSERT SCRIPTS 

3. RUN PROCESS 

4. GET OUTPOUT

Bridge 

between bridge and process 

1. RUN VIEW SERVER BUNDLE

2. DISPATCH (CONSOLE.LOG)

Bridge 

between bridge and process   

 composer require spatie/server-side-rendering  

spatie/server-side-rendering

composer require guansunyata/server-side-rendering  

2. more config

Patched

API

entrance of a SSR root instance

It could be a whole SSR single-page application, a little SSR content embedded in other html, or any kind of mix-up things. 

foo.blade.php 

by app service provider 

https://github.com/spatie/laravel-server-side-rendering 

https://github.com/guAnsunyata/laravel-server-side-rendering

 composer require spatie/laravel-server-side-rendering  

spatie/laravel-server-side-rendering 

composer require guansunyata/laravel-server-side-rendering  

2. more config

Patched

API

entrance of a SSR root instance

Source Code Structure

script for server and client side

Source Code Structure

script for server and client side 

https://ssr.vuejs.org/guide/structure.html#introducing-a-build-step

DX additional effort 

Foundation

 Node.js   

From a building tool to a service.

DX additional effort 

Foundation

 Webpack.ssr.mix.js  

create each instance a server side bundle.

no common chunk. no other plugins.  

run additional script and generate files in storage/ssr

DX additional effort 

For each SSR instance

entry.server/clinet.js  

concern app initialization diff from server side and client side.

e.g. data source & router state

DX additional effort 

Foundation

Vue SSR plugins  

for vue component style & client manifest which helps generating critical css ... 

Patched

Data Fetching

server side and client side

AsyncData 

component async data source

MatchedComponent

run all asyncData function to fetch data for every router matched components 

Data Fetching

server side and client side

Earlier in Context 

by single page api / fetch once

Data Fetching

server side and client side

Node.js Caching

micro cache

By Route

LRU for 3 sec ...

By Data Source

LRU for 10 min ...