Chapter 6. React on the Server
In the previous chapter, we took a look at refactoring our components. We saw how to make use of mixins and extract similar functionalities to use seamlessly across components. We also took a look at DOM interactions, using refs, and related DOM actions from a component.
In this chapter, we will explore how React functions on the server side. React allows us to render and handle components on the server to pre-render HTML, which is useful for several reasons. We will also take a look at how this affects the React component life cycle.
In this chapter, we will cover the following points:
At the end of chapter, we will be able to start using React components on the server side and understand its interactions and implications with the server side.
Getting React to render on server
"Hey Shawn!" Mike startled Shawn, entering their workplace with a cup of coffee.
"Good morning, Mike," replied Shawn.
Sun sparkled on Shawn's desk and they entered into a conversation about a new project that they were about to begin.
"Shawn, I just came to know, from Carla, about a new project that we need to take. The client has asked us to build a simple search page for our Open Library project."
Shawn and Mike had previously build an application to display recent changes from openlibrary.com API. They were now going to build a search application on top of Open Library's Search API.
"Awesome," Mike was excited about this. He was already loving working on React.
"Shawn, for this project, we will be exploring options on how to use React on the server."
Until now, we have been manually mounting our components after page load. Until the component is rendered, the page doesn't have any HTML content from the component.
"Let's see how we will be doing this on the server...
"Now Shawn, let's pre-render the component on the server. What this means is that create an HTML element out of the React component and render its contents in our view on first page load itself. Currently, the loading of the element is taken care of by the client-side code."
"Instead of this, we will render the React element in the Express action itself."
"First, let's set up an .ejs view to display out HTML contents along with dynamically-generated React contents."
In this chapter, we took a look at how server-side rendering can be used with React with the help of Express.js. We started with a client-side React component and in the end, replaced it with server-side rendering using the methods provided by the React API.
In the next chapter, we will look at React add ons for doing two-way binding, class name manipulation, cloning components, immutability helpers, and PureRenderMixin, while continuing with the search project build in this chapter.
