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
Rating
(21)
Level
Beginner
Updated
Jan 2, 2019
Duration
1h 54m
Table of contents
Course Overview
Why Is Server-side Rendering Important?
Fundamentals of Building with React and Server-side Rendering
REST Data in Server-side Rendering and getInitialProps
Extending Your Server-side Rendered App to the Real World
Deploying Your App to a Node Server and Production
Ensuring Your Server-side App Performs
Description
Course info
Rating
(21)
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.

About the author
About the author

Peter is the founder of Silicon Valley Code Camp and long-time software professional specializing in mobile and web technologies. He has also been a Microsoft MVP in ASP.NET since 2006.

More from the author
ASP.NET Core Tag Helpers and View Components
Intermediate
3h 2m
Aug 23, 2019
Using React Hooks
Beginner
1h 54m
May 3, 2019
More courses by Peter Kellner
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi! 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.