Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React ESI: Blazing Fast SSR

React ESI: Blazing Fast SSR

React ESI is a super powerful cache library for vanilla React and Next.js applications, that can make highly dynamic applications as fast as static sites. It provides a straightforward way to boost your application's performance by storing fragments of server-side rendered pages in edge cache servers. It means that after the first rendering, fragments of your pages will be served in a few milliseconds by servers close to your end users! It's a very efficient way to improve the performance and the SEO of your websites; and to dramatically reduce both your hosting costs and the energy consumption of these applications. Help the planet, use React ESI!

Because it is built on top of the Edge Side Includes (ESI) W3C specification, React ESI natively supports most of the well-known cloud cache providers including Cloudflare Workers, Akamai and Fastly. Of course, React ESI also supports the open source Varnish cache server that you can use in your own infrastructure for free (configuration example).

Also, React ESI allows to specify a different Time To Live (TTL) per React component and to generate the corresponding HTML asynchronously using a secure (signed) URL. The cache server fetches and stores in the cache all the needed fragments (the HTML corresponding to every React component), builds the final page and sends it to the browser. React ESI also allows components to (re-)render client-side without any specific configuration.

Kévin Dunglas

April 23, 2019

More Decks by Kévin Dunglas

Other Decks in Programming


  1. React ESI
 Blazing Fast SSR

  2. React ESI @dunglas Kévin Dunglas ❏ Les-Tilleuls.coop’s Founder ❏ Symfony

    Core Team (PHP ) ❏ API Platform and Mercure creator @dunglas
  3. React ESI @dunglas ✍ Self-managed since 2011 ‐ 36 people,

    1,000% in 6 years ➡ jobs@les-tilleuls.coop
  4. React ESI @dunglas Single Page Apps

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

  6. 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
  7. React ESI @dunglas SPAs is the 1st step for Progressive

    Web Apps © Google
  8. React ESI @dunglas PWA are Powered by Service Workers

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

  10. 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 […]. »
  11. React ESI @dunglas But SPAs Do Have Drawbacks: Initial Load

  12. React ESI @dunglas Server-Side Rendering

  13. React ESI @dunglas © Wallmart Labs

  14. React ESI @dunglas © Wallmart Labs © Wallmart Labs

  15. 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)
  16. React ESI @dunglas SSR with React import React from "react";

    import ReactDOMServer from "react-dom/server"; const Index = () => ( <div> <h1>Hello</h1> </div> ); const pageContent = ReactDOMServer.renderToString(<Index />);
  17. React ESI @dunglas SSR With React

  18. 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
  19. React ESI @dunglas What You Really Want © Akabia.fr

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

  21. React ESI @dunglas Edge Side Includes Here Come ESI

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

  23. 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
  24. 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
  25. React ESI @dunglas 
 Just Add the Tag, the Cache

    Server Will Handle Everything Else Could be implemented directly using Node, or CloudFlare Workers
  26. React ESI @dunglas Blazing-fast Server-Side Rendering for React and Next.js

    React ESI
  27. 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
  28. React ESI @dunglas React ESI © The Varnish book

  29. 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 = () => ( <div> <h1>React ESI demo app</h1> <MyFragmentESI greeting="Hello!" /> </div> );
  30. React ESI @dunglas A Fragment export default class MyFragment extends

    React.Component { render() { return ( <section> <h1>A fragment {this.props.greeting /* access to the props as usual */}</h1> </section> ); } }
  31. React ESI @dunglas Setting a TTL export default class MyFragment

    extends React.Component { render() { return ( <section>…</section> ); } 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'); }); } }
  32. 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 ); }); } }
  33. 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) );
  34. React ESI @dunglas State Reconciliation

  35. 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 <script> tag) ❏ Client-side, React ESI automatically finds and reuses these props when initializing the components
  36. React ESI @dunglas Next.js Integration

  37. React ESI @dunglas

  38. React ESI @dunglas Thanks! Any questions?