Isomorphic React (Or universal) 

• What is an isomorphic app? • Good things • Some code • Things to consider / difficulties Isomorphic React 

What is an isomorphic app? • An app which renders on the server initially, then continues to render on the client, using the same code. Client Server • Templates • Business logic • API Server-rendered codebase Isomorphic codebase Server Client Shared Client API Client-rendered codebase 

Why would we? “0.5 second delay caused a 20% drop in traffic” “100ms reduction in page load time increases revenue by 1%” - Google - Amazon 

Single Page App CLIENT SERVER Request page (HTML) Fetch js Initial render Fetch data (AJAX) Render with data First ‘paint’ (first tweet) 557ms * ✱ Average from DO London region, without browser caching - 157Kb bundle size Isomorphic App CLIENT SERVER Request page (HTML) Fetch js Begin rendering on client First ‘paint’ (first tweet) 376ms * Fetch data from API Send HTML JavaScript behaviour initialised: - Click listeners - Client side routing Generate HTML 

Client-only vs isomorphic rendering timings (with cache) 0 100 200 300 400 500 600 0 100 200 300 400 500 600 700 800 900 Time (ms) Bundle size (Kb) Client (first paint) Isomorphic (first paint) Isomorphic (JavaScript enabled) $1,000,000,000 

Bot Visibility • Google crawler is not perfect! • What about non-Google crawlers? (Facebook, Twitter, etc…) http://www.doesgoogleexecutejavascript.com/ 

Code • Components • Routing • Client rendering • Server rendering 

Things to consider • Fetching data • Being mobile responsive • Build process 

Things to consider What about fetching data? 

• isomorphic-fetch or axios allows same data fetching code for both client and server • Both can request data from the same API server Fetching data Separate API server Client App code (components) • Initial HTML • App code React Rendering Server API Server API data API data 

• Rendering and API endpoints exist on same server • Either call – API endpoints on itself – Controller functions Fetching data One server Client App code (components) • Server-side Routing • Initial HTML • App code • API data Server Internal API requests 

Things to consider What about responsiveness? 

Responsiveness App.js • Conditionally rendering elements depending on device type not reliable • Either guess or render nothing or mobile site 

Things to consider What about the build process? 

• Many build features are more difficult in an isomorphic app – JS importing CSS – JS importing images – JavaScript styles - e.g. glamor • A solution – universal-webpack The Webpack battle 

• Can improve initial load time, bot visibility • Consider data fetching, responsiveness, build tools • Depends on your requirements To it up 

• Universal React - https://github.com/alisd23/universal-react • Benchmarks - https://drive.google.com/open?id=0BwtogL1zjbYsMlpDSDJKdU0wYVU Links alisd23 @im_alisd 

Isomorphic React (Or universal)