Server Side Rendering of JavaScript in PHP
2 likes2,117 views
The document discusses server-side rendering (SSR) of JavaScript applications using React and PHP, focusing on the advantages of SSR for improving load times and user experience. It emphasizes a state-based approach for rendering components and outlines options for DOM manipulation while maintaining efficiency. The document also touches on potential issues with dynamic content loading and how to address them using APIs and client-server interactions.
![Nacho Martín
nacho@limenius.com
@nacmartin
ReactDOMServer.renderToString(element)
ReactDOM.hydrate(element, container[, callback])
SSR in React](https://image.slidesharecdn.com/ssrphp-180607092946/85/Server-Side-Rendering-of-JavaScript-in-PHP-70-320.jpg)
![Nacho Martín
nacho@limenius.com
@nacmartin
But we can cache
public function createContext($code, $cachename = null)
{
if ($cachename) {
$cacheItem = $this->cache->getItem($cachename);
if ($cacheItem->isHit()) {
$snapshot = $cacheItem->get();
} else {
$snapshot = V8Js::createSnapshot($code);
$cacheItem->set($snapshot);
$this->cache->save($cacheItem);
}
} else {
$snapshot = V8Js::createSnapshot($code);
}
$this->v8 = new V8Js('PHP', [], [], true, $snapshot);
}](https://image.slidesharecdn.com/ssrphp-180607092946/85/Server-Side-Rendering-of-JavaScript-in-PHP-95-320.jpg)
![Nacho Martín
nacho@limenius.com
@nacmartin
Context variables. PHP
[
'serverSide' => $serverSide,
'href' => $request ->getSchemeAndHttpHost() . $request ->getRequestUri(),
'location' => $request ->getRequestUri(),
'scheme' => $request ->getScheme(),
'host' => $request ->getHost(),
'port' => $request ->getPort(),
'base' => $request ->getBaseUrl(),
'pathname' => $request ->getPathInfo(),
'search' => $request ->getQueryString(),
];](https://image.slidesharecdn.com/ssrphp-180607092946/85/Server-Side-Rendering-of-JavaScript-in-PHP-116-320.jpg)
Server Side Rendering of JavaScript in PHP
- 1. Server-side Rendering of JavaScript in PHP Nacho Martín
- 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 adresses?
- 4. Nacho Martín [email protected] @nacmartin A long time ago in a galaxy far, far away Server
- 5. Nacho Martín [email protected] @nacmartin A long time ago in a galaxy far, far away Server HTML </> HTML </> Client
- 6. Nacho Martín [email protected] @nacmartin Very simple model that works But to show a change we have to do a full page reload. Even for things like “your password must have at least 6 characters”.
- 7. Nacho Martín [email protected] @nacmartin Even for things like this New password New Submit
- 8. Nacho Martín [email protected] @nacmartin Even for things like this New password New Submit ****
- 9. Nacho Martín [email protected] @nacmartin Even for things like this New password New Submit **** Your password must contain 6 characters!
- 10. Nacho Martín [email protected] @nacmartin Adding dynamic elements HTML </> Client HTML </> Server
- 11. Nacho Martín [email protected] @nacmartin Adding dynamic elements HTML </> Client HTML </> JS JS Server
- 12. Nacho Martín [email protected] @nacmartin Step 1: Client uses JS to modify the DOM Client HTML </> JS $( "p" ).addClass( “myClass" );
- 13. Nacho Martín [email protected] @nacmartin With DOM modification We can now modify the document reacting to user interaction. What about loading new content based on content interaction?
- 15. Nacho Martín [email protected] @nacmartin Adding dynamic content HTML </> Client HTML </> JS JS Server
- 16. Nacho Martín [email protected] @nacmartin Adding dynamic content HTML </> Client HTML </> JS JS Server API
- 17. Nacho Martín [email protected] @nacmartin Step 2: Dynamic content Client HTML </> JS $(“#grid").load( “api/page2.html“ ); API
- 18. Nacho Martín [email protected] @nacmartin Step 2: Dynamic content Client HTML </> JS $(“#grid").load( “api/page2.html“ ); API $.get( “api/page2.json“, function(data) { $(“#grid”).html(renderPage(data)); } );
- 19. Nacho Martín [email protected] @nacmartin DOM Manipulation HTML </> This happens in the Browser Element <body> Element <div id=“grid”> Element <h1> Text “Hi there” … Element <div> Element <div>
- 20. Nacho Martín [email protected] @nacmartin 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)); } );
- 21. Nacho Martín [email protected] @nacmartin 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)); } );
- 22. Nacho Martín [email protected] @nacmartin 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)); } );
- 23. Nacho Martín [email protected] @nacmartin Problem: duplication of work HTML </> We need a mechanism in the server to build the initial HTML…
- 24. Nacho Martín [email protected] @nacmartin Problem: duplication of work …and another to update the DOM in the client API $(“#grid”).html(renderPage(data));
- 25. Nacho Martín [email protected] @nacmartin Possible solution: don’t render the content in HTML HTML </> <div id=“grid”>
- 26. Nacho Martín [email protected] @nacmartin And on document load do an API call <div id=“grid”> API $(“#grid”).html(renderPage(data));
- 27. Nacho Martín [email protected] @nacmartin This means that the first thing the user sees is this …and also crawlers :(
- 28. Nacho Martín [email protected] @nacmartin 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.
- 29. Nacho Martín [email protected] @nacmartin When are these problems worse Apps. Bearable. Content pages. Probably unbearable.
- 30. Concurrent problem: DOM manipulation vs State based JS libraries
- 31. Nacho Martín [email protected] @nacmartin We want to build a TODO list Pour eggs in the pan How to cook an omelette Buy eggs Break eggs
- 32. Nacho Martín [email protected] @nacmartin We want to build a TODO list Pour eggs in the pan Beat eggs How to cook an omelette Buy eggs Break eggs
- 34. Nacho Martín [email protected] @nacmartin Options 1: Re-render everything.
- 35. Nacho Martín [email protected] @nacmartin Options 1: Re-render everything. Simple
- 36. Nacho Martín [email protected] @nacmartin Options 1: Re-render everything. Simple Not efficient
- 37. Nacho Martín [email protected] @nacmartin Options 2: Find in the DOM where to insert elements, what to move, what to remove… 1: Re-render everything. Simple Not efficient
- 38. Nacho Martín [email protected] @nacmartin Options 2: Find in the DOM where to insert elements, what to move, what to remove… 1: Re-render everything. Simple Complex Not efficient
- 39. Nacho Martín [email protected] @nacmartin Options 2: Find in the DOM where to insert elements, what to move, what to remove… 1: Re-render everything. Simple EfficientComplex Not efficient
- 40. Nacho Martín [email protected] @nacmartin 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
- 41. Nacho Martín [email protected] @nacmartin Fundamental premise Give me a state and a render() method that depends on it and forget about how and when to render.
- 42. Nacho Martín [email protected] @nacmartin Let’s write a React component Click me! Clicks: 0
- 43. Nacho Martín [email protected] @nacmartin Let’s write a React component Click me! Clicks: 1Click me!
- 44. Nacho Martín [email protected] @nacmartin Let’s write a React component 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;
- 45. Nacho Martín [email protected] @nacmartin Let’s write a React component 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; Initial state
- 46. Nacho Martín [email protected] @nacmartin Let’s write a React component 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; Set new state Initial state
- 47. Nacho Martín [email protected] @nacmartin Let’s write a React component 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; Set new state render(), called by React Initial state
- 48. Nacho Martín [email protected] @nacmartin Working with state constructor(props) { super(props); this.state = {count: 1}; } Initial state
- 49. Nacho Martín [email protected] @nacmartin Working with state constructor(props) { super(props); this.state = {count: 1}; } Initial state this.setState({count: this.state.count + 1}); Assign state
- 50. Nacho Martín [email protected] @nacmartin render() and JSX render() { return ( <div className="App"> <button onClick={this.tick.bind(this)}>Clícame!</button> <span>Clicks: {this.state.count}</span> </div> ); 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.
- 51. Nacho Martín [email protected] @nacmartin render() and JSX render() { return ( <div className="App"> <button onClick={this.tick.bind(this)}>Click me!</button> <span>Clicks: {this.state.count}</span> </div> ); }
- 52. Nacho Martín [email protected] @nacmartin render() and JSX render() { return ( <div className="App"> <button onClick={this.tick.bind(this)}>Click me!</button> <span>Clicks: {this.state.count}</span> </div> ); } Here we don’t modify the state
- 53. Nacho Martín [email protected] @nacmartin render() and JSX render() { return ( <div className="App"> <button onClick={this.tick.bind(this)}>Click me!</button> <span>Clicks: {this.state.count}</span> </div> ); } Here we don’t make Ajax calls
- 54. Nacho Martín [email protected] @nacmartin render() and JSX render() { return ( <div className="App"> <button onClick={this.tick.bind(this)}>Click me!</button> <span>Clicks: {this.state.count}</span> </div> ); } Here we don’t calculate decimals of PI and send an e-mail with the result
- 57. Nacho Martín [email protected] @nacmartin Components hierarchy: props class CounterGroup extends Component { render() { return ( <div> <Counter name="amigo"/> <Counter name="señor"/> </div> ); } }
- 58. Nacho Martín [email protected] @nacmartin Components hierarchy: props render() { return ( <div className="App"> <button onClick={this.tick.bind(this)}> Click me! {this.props.name} </button> <span>Clicks: {this.state.count}</span> </div> ); } and in Counter… class CounterGroup extends Component { render() { return ( <div> <Counter name="amigo"/> <Counter name="señor"/> </div> ); } }
- 59. Nacho Martín [email protected] @nacmartin Components hierarchy: props render() { return ( <div className="App"> <button onClick={this.tick.bind(this)}> Click me! {this.props.name} </button> <span>Clicks: {this.state.count}</span> </div> ); } and in Counter… class CounterGroup extends Component { render() { return ( <div> <Counter name="amigo"/> <Counter name="señor"/> </div> ); } }
- 60. Nacho Martín [email protected] @nacmartin Everything depends on the state, therefore we can:
- 61. Nacho Martín [email protected] @nacmartin Everything depends on the state, therefore we can: •Reproduce states,
- 62. Nacho Martín [email protected] @nacmartin Everything depends on the state, therefore we can: •Reproduce states, •Rewind,
- 63. Nacho Martín [email protected] @nacmartin Everything depends on the state, therefore we can: •Reproduce states, •Rewind, •Log state changes,
- 64. Nacho Martín [email protected] @nacmartin Everything depends on the state, therefore we can: •Reproduce states, •Rewind, •Log state changes, •…
- 65. Nacho Martín [email protected] @nacmartin Everything depends on the state, therefore we can
- 66. Nacho Martín [email protected] @nacmartin Everything depends on the state, therefore we can render the initial state to a HTML string
- 68. Nacho Martín [email protected] @nacmartin First page load HTML </> Client HTML </> JS JS Server API Includes initial state
- 69. Nacho Martín [email protected] @nacmartin When we need more data Client Server APIAPI API calls to update the state and therefore update its representation (UI)
- 70. Nacho Martín [email protected] @nacmartin ReactDOMServer.renderToString(element) ReactDOM.hydrate(element, container[, callback]) SSR in React
- 71. Nacho Martín [email protected] @nacmartin ReactDOMServer.renderToString(<MyApp/>) SSR in React. 1) In the server: <div data-reactroot=""> This is some <span>server-generated</span> <span>HTML.</span> </div>
- 72. Nacho Martín [email protected] @nacmartin 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> …
- 73. Nacho Martín [email protected] @nacmartin ReactDOM.hydrate( <MyApp/>, document.getElementById('root') ) SSR in React. 1) In the client: <div id=“root”> <div data-reactroot=""> This is some <span>server-generated</span> <span>HTML.</span> </div> </div> … The client takes control over it
- 74. Nacho Martín [email protected] @nacmartin renderer.renderToString(app, (err, html) => { if (err) throw err console.log(html) // => <div data-server-rendered="true">Hello World</div> }) var app = new Vue({ el: ‘#root', data: { message: 'Hello Vue!' } }) Similar, in Vue
- 75. Nacho Martín [email protected] @nacmartin React, Vue, but does my library support this? If what is rendered depends on the state then we are probably good. If your JS depends on having the DOM loaded and manipulate it, then we are not good.
- 77. Nacho Martín [email protected] @nacmartin Problematic Example Page API My React Component
- 78. Nacho Martín [email protected] @nacmartin Problematic Example Page API My React Component API “React Component” that renders CkEditor, d3, or other lib that relies on DOM manipulation
- 79. Nacho Martín [email protected] @nacmartin Problematic Example Page API My React Component API “React Component” that renders CkEditor, d3, or other lib that relies on DOM manipulation
- 80. SSR in PHP
- 81. Nacho Martín [email protected] @nacmartin Why? SSR in JavaScript (node.js) is more natural. But it may not be the right choice for the project. Maybe the team has expertise in PHP. Maybe the project already exists. Maybe we want to combine it with sections rendered from PHP. The Real World is not as simple as tutorials.
- 83. Nacho Martín [email protected] @nacmartin WebpackAssets JS JS TS SASS PNG JPEG JS Client App
- 84. Nacho Martín [email protected] @nacmartin WebpackAssets JS JS TS SASS PNG JPEG JS Client App JS Server side App
- 85. Nacho Martín [email protected] @nacmartin JS Code to execute Server side JS App + Component and state that we want to render A few bytes, Changes between requests As big as your app. Doesn’t change between requests
- 86. Options
- 87. Nacho Martín [email protected] @nacmartin This is what we would do for SSR in JS Client JS Front PHP API JS Client side App Server side JS App + Component and state
- 88. Nacho Martín [email protected] @nacmartin This is what we would do for SSR in JS Client JS Front PHP API JS Client side App Server side JS App + Component and state
- 89. Nacho Martín [email protected] @nacmartin This is what we would do for SSR in JS Client JS Front PHP API JS Client side App Server side JS App + Component and state
- 90. Nacho Martín [email protected] @nacmartin Option 1: node.js as subprocess Client PHP App Node.js JS Client side App Server side JS App + Component and state
- 91. Nacho Martín [email protected] @nacmartin Option 1: node.js as subprocess Client PHP App Node.js JS Client side App Server side JS App + Component and state
- 92. Nacho Martín [email protected] @nacmartin Make a call to node.js using Symfony Process component * Easy to setup. * Slow. Library: https://github.com/nacmartin/phpexecjs Option 1: Call a node.js subprocess
- 93. Nacho Martín [email protected] @nacmartin Option 2: V8JS Client PHP App V8js JS Client side App Server side JS App + Component and state
- 94. Nacho Martín [email protected] @nacmartin Option 2: V8JS Client PHP App V8js JS Client side App Server side JS App + Component and state
- 95. Nacho Martín [email protected] @nacmartin But we can cache public function createContext($code, $cachename = null) { if ($cachename) { $cacheItem = $this->cache->getItem($cachename); if ($cacheItem->isHit()) { $snapshot = $cacheItem->get(); } else { $snapshot = V8Js::createSnapshot($code); $cacheItem->set($snapshot); $this->cache->save($cacheItem); } } else { $snapshot = V8Js::createSnapshot($code); } $this->v8 = new V8Js('PHP', [], [], true, $snapshot); }
- 96. Nacho Martín [email protected] @nacmartin Option 2: V8JS Client PHP App V8js JS Client side App Server side JS App Component and state
- 97. Nacho Martín [email protected] @nacmartin Option 2: V8JS Client PHP App V8js JS Client side App Server side JS App Component and state 📷
- 98. Nacho Martín [email protected] @nacmartin Option 2: V8JS Client PHP App V8js JS Client side App Server side JS App Component and state 📷
- 99. Nacho Martín [email protected] @nacmartin Use PHP extension v8js * Fast. * Need to compile v8, v8js, find Docker images… (this problem is not small). Library: https://github.com/nacmartin/phpexecjs Option 2: v8js PHP extension
- 100. Nacho Martín [email protected] @nacmartin Option 3: External JS server Client PHP App JS renderer JS Client side App Server side JS App Component and state
- 101. Nacho Martín [email protected] @nacmartin Option 3: External JS server Client PHP App JS renderer JS Client side App Server side JS App Component and state
- 102. Nacho Martín [email protected] @nacmartin We have “stupid” node.js server used only to render components. It has <100 LoC, and it doesn’t know anything about our logic. * Fast. There is an example a dummy JS server for this purpose at https://github.com/Limenius/symfony-react-sandbox Option 3: External node.js server
- 104. Nacho Martín [email protected] @nacmartin Some libraries phpexecjsReactRendererReactBundle node.js v8js … Twig extension External renderer Selects JS runner Runs it Uses snapshots if available Integration with Symfony
- 105. Nacho Martín [email protected] @nacmartin Options 1 & 2 $renderer = new PhpExecJsReactRenderer(‘path_to/server-bundle.js’); $ext = new ReactRenderExtension($renderer, 'both'); $twig->addExtension($ext); phpexecjs detects the presence of the extension v8js, if not, calls node.js
- 106. Nacho Martín [email protected] @nacmartin Option 3: external renderer $renderer = new ExternalServerReactRenderer(‘../some_path/node.sock’); $ext = new ReactRenderExtension($renderer, 'both'); $twig->addExtension($ext);
- 107. Nacho Martín [email protected] @nacmartin JS side part: React on Rails https://github.com/shakacode/react_on_rails Used among others by
- 108. Nacho Martín [email protected] @nacmartin JS side part: React on Rails {{ react_component('RecipesApp', {'props': props}) }} import ReactOnRails from 'react-on-rails'; import RecipesApp from './RecipesAppServer'; ReactOnRails.register({ RecipesApp }); Twig: JavaScript:
- 111. Nacho Martín [email protected] @nacmartin Redux integration import ReactOnRails from 'react-on-rails' import RecipesAppRedux from './RecipesApp' import configureStore from ' ../store/RecipesStore' const recipesStore = configureStore ReactOnRails.registerStore({ recipesStore }) ReactOnRails.register({ RecipesAppRedux }) Twig: JavaScript: {{ redux_store(‘recipesStore’, initialState) }} {{ react_component('RecipesAppRedux') }}
- 112. Nacho Martín [email protected] @nacmartin Share store between components
- 113. Nacho Martín [email protected] @nacmartin React React React Twig Twig React By sharing store they can share state Twig Share store between components
- 114. Things to consider
- 115. Context
- 116. Nacho Martín [email protected] @nacmartin Context variables. PHP [ 'serverSide' => $serverSide, 'href' => $request ->getSchemeAndHttpHost() . $request ->getRequestUri(), 'location' => $request ->getRequestUri(), 'scheme' => $request ->getScheme(), 'host' => $request ->getHost(), 'port' => $request ->getPort(), 'base' => $request ->getBaseUrl(), 'pathname' => $request ->getPathInfo(), 'search' => $request ->getQueryString(), ];
- 117. Nacho Martín [email protected] @nacmartin Context in the JS side export default (initialProps, context) => { if (context.serverSide) { return <StaticRouter basename={context.base} location={context.location} />; } else { return <BrowserRouter basename={context.base} />; } };
- 118. Header tags
- 119. Nacho Martín [email protected] @nacmartin 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> ); } }
- 120. Nacho Martín [email protected] @nacmartin Extracting headers export default (initialProps, context) => ({ renderedHtml: { componentHtml: renderToString( <StaticRouter basename={context.base} location={context.location} context={{}}> <App initialProps={initialProps} appContext={context} /> </StaticRouter> ), title: Helmet.renderStatic().title.toString() } }); Return array instead of component
- 121. Nacho Martín [email protected] @nacmartin Then in Twig {% set recipes = react_component_array('RecipesApp', {'props': props}) %} {% block title %} {{ recipes.title is defined ? recipes.title | raw : '' }} {% endblock title %} {% block body %} {{ recipes.componentHtml | raw }}{{ redux_store('recipesStore', initialState) }} {% endblock body %}
- 122. Make reality checks
- 123. Nacho Martín [email protected] @nacmartin Better to try it soon Certain JS code doesn’t make sense in SSR: • Timers: SetTimeout, setInterval. • Access to window, or document objects. • Access to the DOM. • First render that depends on weird things like API calls (this is a smell). Don’t wait until the last moment to check SSR if it is in the roadmap
- 124. Summary: What is SSR and what is it for Ways to do it in PHP (pros & cons) Some libraries Tips & practical problems