At the moment, server-side rendered React pages need to:

• fetch ALL the data on the server before sending any HTML to the page

• then wait for ALL the JavaScript to load on the client before hydrating the page

• and then wait for ALL components to hydrate before interacting with the page.

Each step in this process has to finish before the next one can start.

With React 18, we can make this process feel faster for your users by splitting the components in your layout into individual units which don’t need to wait for the rest of the page to fetch, load and hydrate.

This is achieved by

• the renderToPipeableStream method, which enables HTML to be sent to the page before ALL the data for the page has been fetched.

• wrapping individual units of your layout with <Suspense> lets them hydrate independently.

This talk will explain the current problems in server-side rendering and show and explain how React 18 aims to solve these.

Ever thought to yourself, ""You know what would be fun? Building Google Docs, but all by myself“? I did, and I have some fun and painful stories to share!

Collaborative rich text editing on the web is a world you may not know much about, but hopefully after all is said and done, I'll leave you feeling: “if that doofus could do it, I probably could too.”

In this talk, I'll show you how to build rich text editing apps using React, Tiptap, and how to make them collaborative with CRDTs (Conflict-free Replicated Data Types) using Y.js.