You’ve probably heard the terms “Server Side Rendering” or “Progressive Enhancement” floating around before and perhaps even got excited about them. This is especially true if you are in the React scene. Otherwise I highly recommend checking out this great article from StrongLoop to get you up to speed.
Let me show you what I mean — Lets compare an http request in node to one in the browser.
Lets take a look at a modern, universal, http library — Isomorphic Fetch
Well there are many great frameworks out there that help you take this further but React was one of the first, and probably something you have already seen. The beauty of React is that it abstracts away HTML into JSX which allows you to render the JSX differently depending on the environment. In the browser you want to update the existing dom, and in the server you just want to send out a string of html. Luckily with react you can do both of these tasks with the same api.
Take a look at the above JSX. Notice how lines 1–10 are the same, regardless of rendering on the server or in the browser; this is great! However quickly you notice the muck after line 10 — the apis for building the DOM are shared, but rendering sure isn’t. But it get’s worse… After hacking the above approach together you’ll realize the next step is often just as ugly — routing!
Isomorphic routing has actually come a long way since the beginnings of React. In fact you have to look no further than react-router itself. If you have never seen isomorphic routing with react-router I recommend taking a look at this excellent article by Claudio Savino. Honestly, the api is pretty good. But I know we can take it further. The plan for this multi part journy is to take a look at a framework that gets rid of all the magic non-universal apis like
RouterContext and to take a look at what’s possible in this space.
Create your free account to unlock your custom reading experience.