Skip to content

Instantly share code, notes, and snippets.

@jsdf
Last active August 29, 2015 14:16
Show Gist options
  • Save jsdf/570bfdfab21dd51ade3b to your computer and use it in GitHub Desktop.
Save jsdf/570bfdfab21dd51ade3b to your computer and use it in GitHub Desktop.
Isomorphic React notes

Isomorphic React

What is it

  • same code on the client and server
  • usable by non-JS clients (crawlers etc)
  • initially render app on the server, then run client side
  • 'portable' Javascript

Why do it

  • SEO
  • fast time til content visible
  • fast time to interactivity?
  • DRY

How to do it

  • minimise non-portable code
  • render initial state on server
  • server bootstraps client side data
  • application boots up on client and just works
  • use pushstate rather than hashchange
  • hijack links with e.preventDefault()
  • use package.json "browser" field to switch code implementations
  • pretend the server renderer is a client - both talk to API

Caveats :(

  • server must know when data is finished loading before responding
  • data requirements must be observable by server
  • flux must be modified - no singletons (in the case of write actions)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment