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

The core concepts of server-side rendering


As you saw Chapter 1, Getting Started with Isomorphic Web Apps, the core concept of server-side rendering is very simple. The React library provides just two API methods for that:

  • ReactDOMServer.renderToString(ReactElement)
  • ReactDOMServer.renderToStaticMarkup(ReactElement)

They both accept a single React element as they input a parameter and return an HTML string. You can use either of these two methods on the server to generate HTML code for your JavaScript app and send the markup down on the initial request for faster page loads and to allow search engines to crawl your web app for SEO purposes.

Most of the time, you will use the renderToString() method as it not only generates HTML markup but also appends some metadata to the HTML (in a form of data-reactid attributes). This makes it possible to reuse generated markup on the client so that when you bootstrap the same JavaScript app in a browser, React will just verify that the checksum of the generated...