Universal Rendering React Apps

Yup, still a thing

And it's frustrating

as HELL!!!!!

Matt Webb

  • Lead Front End Developer @ Blinker
  • Organizer of DenverScript meetup
  • Co-organizer of Develop Denver
  • Proud Dad of 3 furry children
  • Woodworker wannabe

Twitter: creatify_me

Github: creatifyme

What is Universal Rendering?

Also Isomorphic

Also Also Server Side Render

Also Also Also SSR

What is it?

JavaScript apps are rendered client side or browser. With universal rendering you can serve up a fully rendered page.

What are the benefits?

SEO

Performance

User Experience

JS disabled

SEO

Universal rendering helps search engine crawlers find your content, but sometimes Google can find your content without it.

Most search engines without universal rendering

Google search bot without universal rendering

All search bots with universal rendering

Google search bots without universal rendering

Google search bots with universal rendering

Performance

Universal rendering will usually increase performance for your app, but not always.

User Experience

Because you're now serving up a fully rendered HTML page, your user can see content faster.

JS Disabled

Depending on your audience, JS might not be available to all users.

But there's a catch

Performance Hits & Complexity

Can degrade performance

It's more work for your server, so your HTTP response will take a little longer to return. A lot longer if your servers are under heavy load.

App Complexity

Universal rendering increases the complexity of an app

  • Node support
  • Two routers
  • Prefetching data from an API
  • Specific static markup render function
  • Build Tools - more Webpack configs
  • Server Hot Reloading
  • Redux Store Hydration

Bonus Points

renderToString function is slow and just kind of lame

  • Rendering is asynchronous and non-blocking.
  • Rendering 50%-85% faster than React’s renderToString
  • A streaming interface is provided, so that you can start sending content to the client as soon as the request arrives.
  • It also provides a component caching API to further speed up Universal rendering

Rapscallion to the rescue 

Universal Rendering React Apps

By Matt Webb

Made with Slides.com

Universal Rendering React Apps

Develop Denver 2017 - Universal Rendering React Apps: Yup, still a thing and frustrating as hell

  • 669

More from Matt Webb