React ESI
 Blazing Fast SSR

React ESI @dunglas Kévin Dunglas ❏ Les-Tilleuls.coop’s Founder ❏ Symfony Core Team (PHP ) ❏ API Platform and Mercure creator @dunglas

React ESI @dunglas ✍ Self-managed since 2011 ‐ 36 people, 1,000% in 6 years ➡ [email protected]

React ESI @dunglas Single Page Apps

React ESI @dunglas Server-Side (PHP) vs Client-Side (JS) Rendering © Microsoft

React ESI @dunglas Single Page Apps are So Cool ❏ Update only what is needed (web components) ❏ No full page reload ❏ No « white flash » ❏ Smaller network payloads (JSON vs HTML) ❏ Rich UX

React ESI @dunglas SPAs is the 1st step for Progressive Web Apps © Google

React ESI @dunglas PWA are Powered by Service Workers

React ESI @dunglas Creating Fast SPAs/PWAs is Now Easy

React ESI @dunglas But SPAs Have Major Drawbacks: SEO « Currently, it's difficult to process JavaScript and not all search engine crawlers are able to process it successfully or immediately.
 In the future, we hope that this problem can be fixed, but in the meantime […]. »

React ESI @dunglas But SPAs Do Have Drawbacks: Initial Load Time

React ESI @dunglas Server-Side Rendering

React ESI @dunglas © Wallmart Labs

React ESI @dunglas © Wallmart Labs © Wallmart Labs

React ESI @dunglas SSR Benefits ❏ Typical SEO (like in PHP) ❏ Fast Initial Display (theoretically) ❏ SPA/PWA when fully loaded ❏ One code base, client-side/server-side (theoretically… again)

React ESI @dunglas SSR with React import React from "react"; import ReactDOMServer from "react-dom/server"; const Index = () => ( ); const pageContent = ReactDOMServer.renderToString();

React ESI @dunglas SSR With React

React ESI @dunglas SSR Drawbacks: Performance ❏ All the page must be computed, every time, before sending it to the client ❏ The server must wait for all data needed to display the page ❏ The cache can be set only per full page, not per component

React ESI @dunglas What You Really Want © Akabia.fr

React ESI @dunglas How to Implement That With React/Vue/…?

React ESI @dunglas Edge Side Includes Here Come ESI

React ESI @dunglas ESI at a Glance © merge.nl weblog

React ESI @dunglas Edge Side Includes ❏ Kind of server-side iframe ❏ Page composition is usually handled by a cache server (edge server) ❏ Every fragment can have a different TTL ❏ Use standard HTTP cache headers

React ESI @dunglas Edge Side Includes ❏ Created by Akamai ❏ Supported by Varnish (open source), Squid, CloudFlare, Fastly, Akamai… ❏ Open format, submitted to the W3C in 2001 (not accepted) ❏ Implemented in Symfony since 2011

React ESI @dunglas 
 Just Add the Tag, the Cache Server Will Handle Everything Else Could be implemented directly using Node, or CloudFlare Workers

React ESI @dunglas Blazing-fast Server-Side Rendering for React and Next.js React ESI

React ESI @dunglas React ESI ❏ Server-side, replace React components you want by an ESI tag ❏ Specify a different TTL per component ❏ The corresponding HTML is generated asynchronously ❏ The cache server fetches and stores in its cache all the needed fragments

React ESI @dunglas React ESI © The Varnish book

React ESI @dunglas React ESI: the Higher Order Component import React from 'react'; import withESI from 'react-esi'; import MyFragment from 'components/MyFragment'; const MyFragmentESI = withESI(MyFragment, 'MyFragment'); // The second parameter is an unique ID identifying this fragment. // If you use different instances of the same component, use a different ID per instance. const Index = () => ( );

React ESI @dunglas A Fragment export default class MyFragment extends React.Component { render() { return (

A fragment {this.props.greeting /* access to the props as usual */}

); } }

React ESI @dunglas Setting a TTL export default class MyFragment extends React.Component { render() { return ( … ); } static async getInitialProps({ props, req, res }) { return new Promise(resolve => { // Set a TTL for this fragment if (res) res.set('Cache-Control', 's-maxage=60, max-age=30'); }); } }

React ESI @dunglas Computing initial props export default class MyFragment extends React.Component { render() {/*..*/} static async getInitialProps({ props, req, res }) { return new Promise(resolve => { setTimeout( // Simulate a delay (call to a remote service such as a web API) () => resolve({ ...props, // Props coming from the parent, passed through the internal URL dataFromAnAPI: 'Hello there’ }), 2000 ); }); } }

React ESI @dunglas Serving The Fragments (internal URL) import express from 'express'; import { path, serveFragment } from 'react-esi/lib/server'; const server = express(); server.get(path, (req, res) => // "path" default to /_fragment, change it using the REACT_ESI_PATH env var serveFragment( req, res, // "fragmentID" is the second parameter passed to the "WithESI" HOC, the root component used for this fragment must be returned fragmentID => require(`./components/${fragmentID}`).default) );

React ESI @dunglas State Reconciliation

React ESI @dunglas State Reconciliation ❏ Prevent fetching data clients-side and server-side ❏ During the 1st request (server-side), data are fetched and initial props are computed ❏ The initial props are serialized and injected in the server-side HTML (in a tag) ❏ Client-side, React ESI automatically finds and reuses these props when initializing the components

React ESI @dunglas Next.js Integration

React ESI @dunglas

React ESI @dunglas Thanks! Any questions?