Isomorphic / Universal / Server & Client Side Apps

Let's talk about Isomorphic / Universal apps. Why is there a slash here? Because we haven't all agreed on what we should call these apps yet. What is an isomorphic app?

The idea is that we're sharing code between the server and the client. Generally we're pre-rendering our views on the server and then "remounting" them on the client.

The benefits generally listed are:

  • SEO
  • Performance
  • Maintainability

The main benefit around SEO is that your server will serve up "expanded" HTML which the crawler can read and index (instead of requiring the crawler to run the javascript). This let's us do away with pre-rendering our apps and using __escaped fragment URLs.

The other claim is that real or perceived end-user performance is better - the page is pre-rendered (and can be cached) and so when the user loads the page she doesn't have to wait for the browser to execute the to view the page.

The third claim is that it enables code-sharing - You can reuse code on both the client and the server.

In this issue we're going to explore a few repos and tutorials on how to write isomorphic apps.

Before we dive in though, I have a little skepticism around isomorphic generally.

The SEO advantage is definitely real. Google has started rendering javascript, although there are other search engines, I expect that the Javascript/SEO problem won't be around much longer.

As far as performance goes, correct me if I'm wrong, but I think the jury is still out on this one. By the time you render the view on the server, transfer the markup over the wire, render it in the browser, and remount the components, I'm not quite sure the wall-clock benefit is always as advertised. (If I'm wrong about this, send in your comments!)

For maintainability, which it is technically true that you'll be able to use JS on both browser and client, I've never found this provided much benefit in practice. The main issue tends to be around saving data. Though if we had a sort of isomorphic Relay, that could really help.

In any case, here are a few links to get you running with Isomorphic and React!

--Nate

 

Tutorials


Code









About

Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).


Follow us on Twitter


Curated with love by Nate Murray and the Fullstack.io team.

Suggestions are welcome, just reply to this email - we'd love to hear from you.