Server side rendering with React and Symfony

SSR of React with Symfony Workshop
Bits of theory
Nacho Martin

Nacho Martín
I write code at Limenius.
We build tailor-made projects,
and provide consultancy and formation.
We are very happy with React, and have been
dealing with how to integrate with PHP for
some time now & publishing libraries about it.

What is the problem that
Server Side Rendering
addresses?

A long time ago in a galaxy far, far away
Server

A long time ago in a galaxy far, far away
Server
HTML
</>
HTML
</> Client

Adding dynamic elements
HTML
</>
Client
HTML
</>
Server

Adding dynamic elements
HTML
</>
Client
HTML
</>
JS JS
Server

Step 1: Client uses JS to modify the DOM
Client
HTML
</>
JS
$( "p" ).addClass( “myClass" );

With DOM modiﬁcation
We can now modify the document reacting to
user interaction.
What about loading new content based on
user interaction?

Adding dynamic content
HTML
</>
Client
HTML
</>
JS JS
Server

Adding dynamic content
HTML
</>
Client
HTML
</>
JS JS
Server
API

DOM Manipulation
This happens in the Browser
Element
<body>
Element
<div id=“grid”>
Element
<h1>
Text
“Hi there”
API
$.get( “api/page2.json“,
function(data) {
$(“#grid”).html(renderPage(data));
}
);

DOM Manipulation
This happens in the Browser
Element
<body>
Element
<div id=“grid”>
Element
<h1>
Text
“Hi there”
…
Element
<div>
Element
<div>
API
$.get( “api/page2.json“,
function(data) {
}
);

This means that the ﬁrst thing the user sees is this
…and also crawlers :(

Slow page loads in mobile users
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
• Average load time over 3G: 19 seconds.
• 53% of sites that take longer than 3s are abandoned.
• Going from 19s to 5s means:
• 25% more impressions of ads.
• 70% longer sessions.
• 35% lower bounce race.
• 2x ad revenue.

When are these problems worse
Apps. Bearable.
Content pages. Probably unbearable.

We want
HTML
</>
Initial state in the HTML code we provide to the client

And dynamically
The client takes control over the element
API

So we need a way to run our client
side JS app from our server
Let’s run some JS from PHP

WebpackAssets
JS JS
TS SASS
PNG JPEG
JS
Client App

WebpackAssets
JS JS
TS SASS
PNG JPEG
JS
Client App
JS
Server side App

Conﬁguration
module.exports = {
entry:
output:
};
Entry points of our code
Files to be generated

Conﬁguration
module.exports = {
entry:
output:
module: {
rules: [
]
},
};
Entry points of our code
Files to be generated
How to deal with diﬀerent
types of modules (js, png, scss…)

We want to build a TODO list
Pour eggs in the pan
How to cook an omelette
Buy eggs
Break eggs

We want to build a TODO list
Pour eggs in the pan
Beat eggs
How to cook an omelette
Buy eggs
Break eggs

Options
1: Re-render everything.

Options
1: Re-render everything. Simple

Options
1: Re-render everything. Simple Not eﬃcient

Options
2: Find in the DOM where to
insert elements, what to move,
what to remove…
1: Re-render everything. Simple Not eﬃcient

Options
what to remove…
Complex
Not eﬃcient

Options
what to remove…
EﬃcientComplex
Not eﬃcient

Options
what to remove…
EﬃcientComplex
Not eﬃcient
React allows us to do 1, although it does 2 behind the scenes

Fundamental premise
Give me a state and a render() method that depends
on it and forget about how and when to render.

Let’s write a React component
Click me! Clicks: 0

Click me! Clicks: 1Click me!

import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {count: 1};
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div className="App">
<button onClick={this.tick.bind(this)}>Click me!</button>
<span>Clicks: {this.state.count}</span>
</div>
);
}
}
export default Counter;

super(props);
}
tick() {
}
render() {
return (
</div>
);
}
}
Initial state

super(props);
}
tick() {
}
render() {
return (
</div>
);
}
}
Set new state
Initial state

super(props);
}
tick() {
}
render() {
return (
</div>
);
}
}
Set new state
render(), called by React
Initial state

Working with state
super(props);
}
Initial state

Working with state
super(props);
}
Initial state
Assign state

render() and JSX
It is not HTML, it is JSX.
React transforms it internally to HTML elements.
Good practice: make render() as clean as possible, only a return.
render() {
return (
<button onClick={this.tick.bind(this)}>Clícame!</button>
</div>
);
}

Components hierarchy: props
class CounterGroup extends Component {
render() {
return (
<div>
<Counter name=“dude"/>
<Counter name=“sir”/>
</div>
);
}
}

Components hierarchy: props
render() {
return (
<button onClick={this.tick.bind(this)}>
Click me! {this.props.name}
</button>
</div>
);
}
and in Counter…
class CounterGroup extends Component {
render() {
return (
<div>
<Counter name=“dude"/>
<Counter name=“sir”/>
</div>
);
}
}

Fundamental premise
Everything depends on the state, therefore we can

Fundamental premise
Everything depends on the state, therefore we can
render the initial state to a HTML string

ReactDOMServer.renderToString(element)
ReactDOM.hydrate(element, container[, callback])
SSR in React

ReactDOMServer.renderToString(<MyApp/>)
SSR in React. 1) In the server:
<div data-reactroot="">
This is some <span>server-generated</span> <span>HTML.</span>
</div>

SSR in React. 2) insert in our template
<html>
…
<body>
<div id=“root”>
</div>
</div>
…

ReactDOM.hydrate(
<MyApp/>,
document.getElementById('root')
)
SSR in React. 3) In the client:
<div id=“root”>
</div>
</div>
…
The client takes control over it

ReactRenderer ecosystem
phpexecjsReactRendererReactBundle
node.js
v8js
…
Twig extension
External renderer
Selects JS runner
Runs it
Uses snapshots
if available
Integration with
Symfony React on Rails
integration

JS side part: React on Rails
https://github.com/shakacode/react_on_rails
Used among others by

JS side part: React on Rails
import ReactOnRails from 'react-on-rails';
import RecipesApp from './RecipesAppServer';
ReactOnRails.register({ RecipesApp });
JavaScript:

Server part
Twig:
SSR: rendered HTML
Client side: a <script/> tag with
the info to render the component

React Router
<Router>
<Route
path={"/movie/:slug"}
render={props => <Movie {…props} />}
/>
<Route
path={"/movies"}
render={props => <MovieList {…props} />}
/>
</Router>;

React Router
<Router>
<Route
/>
<Route
path={"/movies"}
/>
</Router>;
Diﬀerent for SSR & Browser

React Router
<Router>
<Route
/>
<Route
path={"/movies"}
/>
</Router>;
props.match.params.slug
Diﬀerent for SSR & Browser

React Router
import { BrowserRouter, StaticRouter, Route } from "react-router-dom";
export default (initialProps, context) => {
if (context.serverSide) {
return (
<StaticRouter
basename={context.base}
location={context.location}
context={{}}
>
<MainApp { ...initialProps} />
</StaticRouter>
);
} else {
return (
<BrowserRouter basename={context.base}>
</BrowserRouter>
);
}
};

Extracting headers
react-helmet (vue-helmet)
import { Helmet } from "react-helmet";
class Application extends React.Component {
render() {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title </title>
<link rel="canonical" href="http: //mysite.com/example" />
</Helmet>
...
</div>
);
}
}

Extracting headers
Return array instead of component
export default (initialProps, context) => {
if (context.serverSide) {
return {
renderedHtml: {
componentHtml: renderToString(
<StaticRouter
basename={context.base}
location={context.location}
context={{}}
>
</StaticRouter>
),
title: Helmet.renderStatic().title.toString()
}
};
} else {
return (
<BrowserRouter basename={context.base}>
</BrowserRouter>
);
}
};

Then in Twig
{% set movie = react_component_array('MoviesApp', {'props': props}) %}
{% block title %}
{{ movie.title is defined ? movie.title | raw : '' }}
{% endblock title %}
{% block body %}
{{ movie.componentHtml | raw }}
{% endblock %}
Use members of the array

External JS server
Client
PHP
App
JS
renderer
JS
Client side App
Server side JS App
Component and state

ReactRenderer ecosystem
phpexecjsReactRendererReactBundle
node.js
v8js
…
External renderer

Server side rendering with React and Symfony

Recommended

More Related Content

What's hot (20)

Similar to Server side rendering with React and Symfony (20)

More from Ignacio Martín (17)

Recently uploaded (20)

Server side rendering with React and Symfony