Build a Server Rendered + Code Split App in React with React Universal Component
Instructor
Tim Kindberg- React
^16.0.0
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!
Learner Reviews
- Marcell Ciszek4 years agoWhat did you like about this course?
Super useful! I always wanted to know how to code split in a proper way
- Grant6 years agoHow will you use what you learned from this course?
The course was well put together, and fairly clear. The code on github had some issues as I think someone upgraded webpack without making sure the code would work but I can now see that a pull request was created to fix this.
Would have given the course more if (a) explanation why react-router was not used in the demos and (b) the async redux example performed a http request. Is (a) because universal component does not play nice with react-router? I assume (b) is not particularly disimilar to the example in the 13th video but it would be nice to see this working before I invest time into getting it working myself.
Another nice to have would be, assuming the framework is capable, having css modules working as this can be quite complex to setup in a react SSR application.
Anyway I don't want to be too critical as I learned a lot from the course and I think this will really help me with the work I am currently embarking on.
- Hitesh Burla6 years agoWhat would make this course a 7 for you?
Very good course. Great Content. My only comment is that i felt, most of the steps despite being clear missed the reasoning on why it has been done in such manner. Other than that... THUMBS UP!
- Juan Carlos Valerio Arrieta6 years agoWhat did you like about this course and how will it help you?
Got a lot of examples on how to do SSR and how use it with Redux in a simple way
- Walter6 years agoWhat did you like about this course and how will it help you?
good step by step introduction to react universal component
would be great to update to webpack4 and also include routing
- Jamie6 years agoWhat did you like about this course and how will it help you?
Awesome course!! I spent a week trying to get this all working by myself. Ending up having to learn how to write babel plugins and webpack plugins so that I had a better understanding of what was happening. Having this course beforehand would have saved me a lot of time.
Course Content
You might also like these resources:
Introduction to Cloudflare Workers
Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.
Create an eCommerce Store with Next.js and Stripe Checkout
This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio
Practical Git for Everyday Professional Use
git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.