Course Overview

Using Suspense and Server Components for Loading Data

Introduction

A Typical App Flow for First Render

Using Component State to Handle Data Changes

A Typical App Flow UI Interaction

A Word About What Is React and What Is Next.js

What’s Coming in This Course

Server Action Replacing REST PUT Call

Introduction

Scaffolding the React App with Next.js

All Demos in GitHub Repository

Launching the React App with Next.js and VS Code

A Big Gotcha with the App Router in Next.js

Adding Proper TypeScript Typing to the React App

A Brief Review of TypeScript

Streamlining Style and Component Design in React

Rendering a Static List of Attendees with Loading State

Adding Data Persistence with SQLite and Prisma

Replacing Static Data with REST and SQLite Calls

Takeaways

Implement a REST Server in Node with API Router

Seeding SQLite with Data

Updating the Speaker Component to Call REST Service

Create a Combined State Object

Add Component Nesting to Allow for React Context

Adding Layout, Navigation, Header, and a Footer

Adding a REST Implementation for a Second Table

Create Dedicated Data Context from Existing State Management

Processing a REST POST with the Form Element

Takeaways

Enhancing the Form Processing UI

Comparing Suspense to Code without Suspense

Introducing Suspense for Data

The React Hook [use] Is Canary Release

Error Processing with Suspense

Source Code Going Forward in This Module

Data with Loading States Code Review

Takeaways

Nest Suspense Boundaries

Data with Server Suspense Code Review

Adding Login Authentication

Implementing Authentication into Our React App

Nested Context Providers and Implementing General Search

Adding Event Processing with a Speaker Favorite Toggle

Create a Two Step Wizard Sign-up Form

Implement Modal Dialog for Updates

Animating Loading Status Rendering

Loading Data with Server Components and Suspense

Comparing Server Actions to REST

Form Action Basics

Responding to a Form POST with a Server Action

Separating Server Actions into Their Own Files

Calling a Server Action from a Client Component

Returning Data from Server Actions

Calling Server Actions Directly

Revisiting React Form Basics and Clearing Data

Returning Success and Errors from Server Actions

Motivation for Runtime Data Validation in Server Actions

Improving Server Action UI Performance

Adding Zod Runtime Validation to a Server Action

Implementing Directly Calling Server Actions

Takeaway

Replacing REST Calls with Server Actions for Speaker Updates

Takeaways