%in tembisa+277-882-255-28 abortion pills for sale in tembisa
Server side rendering with React and Symfony
1. SSR of React with Symfony Workshop
Bits of theory
Nacho Martin
2. 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.
3. What is the problem that
Server Side Rendering
addresses?
4. A long time ago in a galaxy far, far away
Server
5. A long time ago in a galaxy far, far away
Server
HTML
</>
HTML
</> Client
13. 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));
}
);
14. 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) {
$(“#grid”).html(renderPage(data));
}
);
15. This means that the first thing the user sees is this
…and also crawlers :(
16. 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.
17. When are these problems worse
Apps. Bearable.
Content pages. Probably unbearable.
34. Options
2: Find in the DOM where to
insert elements, what to move,
what to remove…
1: Re-render everything. Simple Not efficient
35. Options
2: Find in the DOM where to
insert elements, what to move,
what to remove…
1: Re-render everything. Simple
Complex
Not efficient
36. Options
2: Find in the DOM where to
insert elements, what to move,
what to remove…
1: Re-render everything. Simple
EfficientComplex
Not efficient
37. Options
2: Find in the DOM where to
insert elements, what to move,
what to remove…
1: Re-render everything. Simple
EfficientComplex
Not efficient
React allows us to do 1, although it does 2 behind the scenes
38. Fundamental premise
Give me a state and a render() method that depends
on it and forget about how and when to render.
46. Working with state
constructor(props) {
super(props);
this.state = {count: 1};
}
Initial state
this.setState({count: this.state.count + 1});
Assign state
47. 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 (
<div className="App">
<button onClick={this.tick.bind(this)}>Clícame!</button>
<span>Clicks: {this.state.count}</span>
</div>
);
}
57. SSR in React. 2) insert in our template
<html>
…
<body>
<div id=“root”>
<div data-reactroot="">
This is some <span>server-generated</span> <span>HTML.</span>
</div>
</div>
…
61. JS side part: React on Rails
https://github.com/shakacode/react_on_rails
Used among others by
62. JS side part: React on Rails
import ReactOnRails from 'react-on-rails';
import RecipesApp from './RecipesAppServer';
ReactOnRails.register({ RecipesApp });
JavaScript:
72. 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