Building a React Universal Blog App: A Step-by-Step Guide

When we think of single page applications (SPAs) we think browsers, JavaScript, speed and, in my case, invisibility to search engines. This is because a SPA renders a page’s content using JavaScript and since web crawlers do not use a browser to view web pages, they cannot view and index the content. Or, to better say, most of them can’t. This is a problem that some developers have tried to solve in various ways:

  1. Adding an escaped fragment version of a website which requires all pages to be available in static form and adds a lot of extra work (now deprecated).
  2. Using a paid service to un-browserify a SPA into static markup for search engine spiders to crawl.
  3. Trust that search engines are now advanced enough to read our JavaScript-only content (I wouldn’t just yet).

Using Node.js on the server and React on the client, we can build our JavaScript app to be universal (or isomorphic). This could offer several benefits from server-side and browser-side rendering, allowing both search engines and humans using browsers to view our SPA content.

In this step-by-step tutorial I will show you how to build a React Universal Blog App that will first render markup on the server side to make our content available to search engines. Then, it will let the browser take over in a single page application that is both fast and responsive.

Continue reading %Building a React Universal Blog App: A Step-by-Step Guide%

Source: Sitepoint