Server Component Fundamentals in React 18
This course will teach you how React Server Components can improve the quality of your React apps and architecture.
What you'll learn
Good app design means fewer bugs, lower maintenance costs, and happier users. In this course, Server Component Fundamentals in React 18, you’ll learn about React Server Components and how you can use them to provide a better user experience. First, you’ll dive into the technology behind server components so that using them makes sense. Next, you’ll explore how to build Server Components that work with async data sources. Finally, you’ll learn how to incorporate Server Components in a real-world app so that your apps provide great browser user experiences and are easy to build. When you’re finished with this course, you’ll have all the knowledge and tools necessary to build apps with React Server and Client Components that provide excellent and performant UIs for your users.
Table of contents
- Welcome 2m
- Introduction to Server Components 5m
- Why Should You Use React Server Components 3m
- How Server Components Are Different from Server-side Rendered Apps 3m
- Rendering Multiple Server Components Incrementally 5m
- Server Components with Client Components as Children 4m
- GitHub Repo for Course Examples 1m
- Calling Client from Server Components 6m
- Takeaways and What's Coming 3m
- Introduction 1m
- Client Components Calling Client Components 4m
- Calling Third-party APIs and use-client 3m
- Server Components as Children to Client Components 5m
- Adding a Custom Theme Provider as a Client Component 5m
- Adding a UI to Toggle the Custom Theme 5m
- Moving Client Components to the Leaf Nodes 4m
- Takeaways 1m
- Introduction to Async Based Server Components 3m
- React Server (And Client) Components in Our App 5m
- Our Conference React App Starting Point in GitHub 5m
- Rendering Lists in Our Conference App 4m
- A Very Brief Introduction to TypeScript 5m
- Add Async REST Call to a Server Component 6m
- Using Multiple Async Server Components 4m
- Takeaways 2m
- Introduction 5m
- Scaffolding a React App with Next.js in an Empty Folder 5m
- Path Aliases and Config Files in Next.js 4m
- Building a Simple App with Server and Client Components 5m
- Adding Async Data 5m
- Improving Our UI with Suspense 7m
- Adding Support for Errors with Error Boundaries in Next.js 2m
- Create an Error Boundary around a Server Component 6m
- Nesting Error Boundaries between Server Components 6m
- Adding a Client Component for a Tooltip Effect 5m
- Takeaways 1m
- Introduction 4m
- The Prescribed Filenames for the Next.js App Router 2m
- The GitHub Starting Point for Conference App 1m
- Refactor to a New Sessions Route 6m
- Refactor to Include loading.tsx and error.tsx in Our Sessions Folder 6m
- Adding a Tabbed Interface for Speakers and Sessions 6m
- Building the Speaker Tab 6m
- Adding Dynamic Routing to Speaker Detail from Sessions 2m
- Implementing Dynamic Routing 6m
- Sub-views, Grouping, and Nested Layouts 3m
- Implement a Route Group for a Nested Menu 6m
- Takeaways 2m
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