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.
What you'll learn
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.
Table of contents
- Building a Simple React App with No Build System 2m
- Using DOM Methods to Write to a Browser 2m
- Replacing DOM Methods with React Calls 1m
- Creating a React Functional Component 1m
- Passing Props to a Component 1m
- Converting a Functional Component to a Class Component 3m
- Understanding How JSX Fits into the Next.js Framework 3m
- Building an App with Next.js and JSX Syntax 5m
- Integrating a CSS File into the Next.js Project 4m
- Summary of What We Have Learned 1m
- Solving Our Puzzle and What Is Coming Up 2m
- Overview of Server and Client-side Rendering 4m
- Coding a Server and Client-side Rendering Solution 6m
- Taking Next’s getInitialProps to Async by Returning a Promise 2m
- Rendering Async Rest Data Server and Client-side 5m
- Learn Client-side Page Routing with Next's Link Element 2m
- Summary of What We Have Learned 1m
- Introduction 2m
- Integrate Bootstrap 4 4m
- Refactoring Static Bootstrap to React Components 3m
- Add a Layout Page with the Next.js _app.js File 3m
- More Detailed Refactoring Including to Bootstrap Cards 5m
- Adding a Speaker Detail Page That Works Client-side Only 4m
- Server-side Rendering of a Landing Page with Query Parameters 3m
- Takeaways 1m
About the author
Peter is an independent software consultant, specializing in .NET development from 1985 through 2001, as well as an eleven time Microsoft MVP. He was founder and president of Tufden Inc, where he successfully delivered systems for clinic scheduling, insurance company management and medical claim processing. His solutions included delivering a turnkey medical office management system to over 500 customers nationwide. His passion for the computer dates back to elementary school when he joined his ... more