Isomorphic React: the benefits, pitfalls and work-arounds

For the layman, Isomorphic React is a server-rendered client side app. Got that? Us neither. Luckily Ali Sheehan-Dare is there to talk us all through it with an expansion on his post, A Lazy Isomorphic React Experiment.

Transcript

1. Isomorphic React (Or universal)
2. • What is an isomorphic app? • Good things • Some code • Things to consider / difficulties Isomorphic React
3. 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
4. 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
5. 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
6. 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
7. Bot Visibility • Google crawler is not perfect! • What about non-Google crawlers? (Facebook, Twitter, etc…) http://www.doesgoogleexecutejavascript.com/
8. Code • Components • Routing • Client rendering • Server rendering
9. Things to consider • Fetching data • Being mobile responsive • Build process
10. Things to consider What about fetching data?
11. • 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
12. • 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
13. Things to consider What about responsiveness?
14. Responsiveness App.js • Conditionally rendering elements depending on device type not reliable • Either guess or render nothing or mobile site
15. Things to consider What about the build process?
16. • 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
17. • Can improve initial load time, bot visibility • Consider data fetching, responsiveness, build tools • Depends on your requirements To it up
18. • Universal React - https://github.com/alisd23/universal-react • Benchmarks - https://drive.google.com/open?id=0BwtogL1zjbYsMlpDSDJKdU0wYVU Links alisd23 @im_alisd
19. Isomorphic React (Or universal)