Building Server-side Rendered React Apps for Beginners

Learn how to use React to solve the first page download problem that single-page apps (SPAs) have. You'll see how to easily build high performance web apps that implement server-side rendering on every landing page using the Next.js framework.

Course info

Level

Beginner

Updated

Jan 2, 2019

Duration

1h 54m

Description

Single-page apps have become the standard and best way to build interactive web sites. Unfortunately, there’s a problem with most SPAs, and it’s called the first page download problem, which leads to lots of waiting, and unhappy users. In this course, Building Server-side Rendered React Apps for Beginners, you’ll learn how to solve this first page download problem by having the web server generate all the HTML for you that would otherwise have to be generated by the client. First, you'll explore fundamentals of React. Next, you'll see what it takes to build a React app, that renders full HTML from the server on every landing page, then runs 100% clientside after that. Then, you’ll learn about the more complex case of including REST data in your server-side rendered html. Finally, you'll see how to deploy your app with Docker to Digitial Ocean, one of the top web hosts on the internet that can scale your app from tiny to huge. When you're finished with this course, you'll be ready to build highly-performant React web apps that download all the HTML necessary to display a web page immediately to the user; no more first page download problem.

Section Introduction Transcripts

Course OverviewHi! This is Peter Keller. Welcome to my course, Building Server-Side Rendered React Apps for Beginners. I'm an independent software architect helping businesses deliver best-in-class web solutions to their customers. You can find me at PeterKellner. net. I'm excited to share with you how to solve the first-page download problem associated with all single-page JavaScript apps also known as SPAs. If your customers' first experience is a slowly responding webpage because of all the interaction to your server, you are starting on the wrong foot. In this course, you'll learn how to build React single-page apps that render full HTML from the server on every landing page. You'll do this with no extra coding effort on your end, and your customers will have an awesome experience from the start. The course starts with learning some React fundamentals. Next, I'll show you what it takes to build a React app that renders full HTML from the server on every landing page, then runs 100% client-side after that. Then we'll take on a more complex case of including REST data in your server-side rendered HTML. And, finally, we'll go through the details of deploying your app with Docker to DigitalOcean, one of the top web hosts on the internet that can scale your app from tiny to huge. By the end of the course, every React app you build will render full server-side HTML on every page with no first-page download problem. Before beginning the course, you should be comfortable writing modern JavaScript. It would be helpful to have watched at least one getting started React course. Join me on this journey to learn how to solve the first-page download problem in React with the course, Building Server-Side Rendered React Apps, here, at Pluralsight.

REST Data in Server-side Rendering and getInitialPropsHi! This is Peter and welcome back. In the previous module, we ended with a puzzle. When running our DigitalClock, why do we get in our debug console an error Text content did not match server? In this module, you'll not only learn the quick fix to this problem, but you'll also learn the thinking the Next. js team put into this to figure out how to solve this problem. It involves including in your special pages file in the pages directory of your website a new static method named getInitialProps. The fix is barely a few lines of code, but as I always say it's not the number of lines of code that matter, it's what's in and where they go that counts. I want to make sure that you understand what's really going on under the covers of Next so you are fully equipped to make the best use of the Next framework as you develop your own server-side rendered React apps. So what will we cover in this module? We'll first give you an overview of what we did in the last module and the problem it caused and what we need to do to fix it. Then we'll move on to talking about how that fix also applies to page initialization problems that include asynchronous calls, which happen to also be all REST calls. Finally, we'll take a look at how to do routing with server-side rendered apps. The reason that's tricky is that if you want your server-side app to render data that may come from an asynchronous source like all REST calls, for example, the server can't download the page until the REST call completes. Normally this involves a lot of tricky code, but through the awesome architecture of Next. js and your understanding of that architecture, it's easy to make server-side rendering happen with async return data included in it. Let's get started now with the overview.

Deploying Your App to a Node Server and ProductionThis is Peter and welcome back. This module is about building and deploying your React server-side web app. Let me be really clear that I recognize this is a huge topic and could easily have a course of its own. An objective of mine in this module is to give you enough runway so you can at a minimum get your React server-side SPA app out of the lab and into the wild. Another objective is to make sure you have a real-world sense of the Next. js performance when running the minimized, optimized production build. I know for myself sometimes when I'm doing development, I feel like the app really does not run well. I often need to check it in production just to make sure I've done everything right. Another objective is to take the conference site that we've developed and ran the Next. js's production build step, then deploy it as you would your own production app. You can think of this module also as a steppingstone to get us to our next module, which is all about web app performance and improving the end user experience of our browser users. Here's what to expect in this module. So far we've not talked at all about configuration. That is, in development, we test our REST services against a local JSON server. In production, we go after a real server. You'll see how to set and read environmental variables based on whether we are in production or development. Next, you'll learn a very prescriptive way to build a Docker image of your Next. js React server-side rendered app. You'll then learn how to run this Docker image on your local machine after installing Docker that is. We'll tag and push your Docker image to the Docker hub registry so it's ready to publish to a cloud hoster. Then we'll deploy from the Docker hub registry our Docker image to DigitalOcean, a well-known Docker cloud host, so that you can see the app running in production from a public URL.