illustration for Build a Server Rendered + Code Split App in React with React Universal Component

Build a Server Rendered + Code Split App in React with React Universal Component

Instructor

Tim Kindberg
45m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.5
410
people completed
Bookmark
Download
RSS

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 Ciszek
    4 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Super useful! I always wanted to know how to code split in a proper way

  • Grant
    6 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    How 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 Burla
    6 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What 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 Arrieta
    6 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What 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

  • Walter
    6 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What 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

  • Jamie
    6 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What 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

45m • 13 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers

    Introduction to Cloudflare Workers

    Kristian Freeman・36m・Course

    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.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout

    Create an eCommerce Store with Next.js and Stripe Checkout

    Colby Fayock・1h 4m・Course

    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

    illustration for Practical Git for Everyday Professional Use

    Practical Git for Everyday Professional Use

    Trevor Miller・1h・Course

    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.