Build a Server Rendered + Code Split App in React with React Universal Component
Offered By: egghead.io
Course Description
Overview
In this course, you will be learn how to get your react app to load as quickly as possible to maximize user engagement—we need faster rendering speed and smaller network requests!
You’ll learn how to both split code into lazily loaded bundles AND server-side render your page.
This has not been possible until very recently—you had to choose either code-splitting or SSR. Sure you have Next.js which is awesome, but it’s a framework that you need to buy into. With react-universal-component you are getting a framework-less Next.js that is in your control!
The react-universal-component library does a great job making it as simple as can be, but there are still various specific configurations and practices that must be followed to get it working. So watch the videos to learn how it’s done!
You’ll learn how to both split code into lazily loaded bundles AND server-side render your page.
This has not been possible until very recently—you had to choose either code-splitting or SSR. Sure you have Next.js which is awesome, but it’s a framework that you need to buy into. With react-universal-component you are getting a framework-less Next.js that is in your control!
The react-universal-component library does a great job making it as simple as can be, but there are still various specific configurations and practices that must be followed to get it working. So watch the videos to learn how it’s done!
Syllabus
- Install the NPM Dependencies Needed for a Universal React App
- Configure Webpack to Work with React Universal Component
- Configure Express / React / Babel to Work with React Universal Component
- Configure hot module reloading to work with react-universal-component
- Code-Splitting Components with the Universal Higher-Order Component
- Dynamically Load a Code-Split Universal React Component via a Prop
- Configure a Custom Universal React Loading Component
- Animate a Universal React Loading Component using Delay Options and Component Hooks
- Set an Error Component in React Universal when a Component Fails to Load
- Preload a Universal Component On-Demand with the Preload Method
- Load a Universal React Named Exported Component with the Key Option
- Add Redux with Server-to-Client State Hydration to a React Universal Project
- Lazy Load Redux Reducers with Code-split Universal React Components using onLoad
Taught by
Tim Kindberg
Related Courses
30 Days to Learn LaravelLaracasts 3D Graphics for Web Developers
Pompeu Fabra University via FutureLearn A Beginner’s Guide to Web Development with HTML5
Packt via FutureLearn Accessibility Audit
Amazon Web Services via AWS Skill Builder Expanding Your JS Skills with Angular
A Cloud Guru