Book Image

Isomorphic JavaScript Web Development

By : Tomas Alabes, Konstantin Tarkus
Book Image

Isomorphic JavaScript Web Development

By: Tomas Alabes, Konstantin Tarkus

Overview of this book

<p>The latest trend in web development, Isomorphic JavaScript, allows developers to overcome some of the shortcomings of single-page applications by running the same code on the server as well as on the client. Leading this trend is React, which, when coupled with Node, allows developers to build JavaScript apps that are much faster and more SEO-friendly than single-page applications.</p> <p>This book begins by showing you how to develop frontend components in React. It will then show you how to bind these components to back-end web services that leverage the power of Node. You'll see how web services can be used with React code to offload and maintain the application logic. By the end of this book, you will be able to save a significant amount of development time by learning to combine React and Node to code fast, scalable apps in pure JavaScript.</p>
Table of Contents (16 chapters)
Title Page
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

React server rendering


React provides a way to render components to strings specially for the case of server-side rendering. This is done through the react-dom package, that manages the React to dom conversion. But, we don't need to just render a view, but the right view. That is where isomorphic routing comes into picture.

As we said in the beginning of the chapter, there are several options for routing in React, and we will continue using react-router for it.

Let's go.

Rendering a view

Rendering on the server is a bit different. When we get a request, we need to figure out which is the right route and serve the resource, maybe along with initial client state data. The basic idea is that we wrap the app in a stateless <StaticRouter> instead of a <BrowserRouter>. The main difference between these two routers is that the location of the static router never changes, hence useful for our case, where we only need to compute the needed route and send the view back to the client.

We will...