Dear Client, I'm Leaving You

Rate this content
Bookmark

With React Server Components and React’s new suspense SSR capabilities, we get an paradigm shift in the world of client/server side rendering. The pendulum that started in plain HTML pages, quickly swinged to all-client-rendering, is now returning to the server side. Emerging frameworks like Next.js and Remix usher a new era of web development, one where SSR is a first class citizen. In this talk we deep dive into those React features, talk about the state of the art practices regarding server rendering, and maybe get a glimpse into the exciting future of front-back-full-stack relationships.

Liad Yosef
Liad Yosef
21 min
21 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Liad Yosef discusses the importance and evolution of server-side rendering, highlighting its benefits such as improved performance and SEO. He explores different rendering strategies and the challenges of hydration in React. He introduces SuspenseSSL in React 18 as a solution for fetching data in advance and selectively hydrating components. He also mentions React Server Component as a game changer for reducing bundle size in rendering with React.

Available in Español

1. Introduction to Server-Side Rendering

Short description:

In this part, Liad Yosef introduces himself and the topic of the talk, which is server-side rendering. He mentions the importance of discussing this topic and refers to a quote by Abraham Lincoln. He also mentions that the talk will focus on server-side rendering in React.

Hi. Hi, everyone. Thank you for attending my talk. I'm Liad Yosef. My talk is called Dear Client, I'm Leaving You. We're going to talk a little bit about server-side rendering, server-side rendering, and everything in between.

So I'm Liad Yosef. I'm the lead front-end architect in Douda. I'm a web enthusiast, and in my free time, I'm also an analog astronaut. I have the privilege of going to analog missions around the world, I really like space. So with this in mind, we will turn our talk into somewhat of a dark mode talk, and it will be a space theme.

So you might ask yourself, why do we need to talk about server-side rendering? Abraham Lincoln once said that if I had eight hours to chop down a tree, I'd spend six sharpening my axe, and Rick Sanchez added that the universe is much more complicated than you think. So be prepared for a 20-minute adventure on the rabbit hole of server-side rendering, and how do we approach it in React?

2. Understanding Server-Side Rendering

Short description:

In this part, Liad Yosef discusses the concept of server-side rendering and its evolution over time. He explains the difference between classic server rendering, client-server rendering, and new server-side rendering. Liad highlights the reasons for using server-side rendering, such as improved performance, better SEO, and addressing issues with client-side rendering. He also mentions the importance of considering performance criteria like cumulative layout shift and large contentful paint. Additionally, he references a talk by Rich Harris on the impact of single-page applications on the web.

It's not like we're watching Dan Abramov on Netflix. So I'll frame my talk a little bit like Netflix. There are a lot of topics to discuss. You can either choose performance or hooks or money heist, a web three or a grid game, but I will focus about server walls.

Server walls, that's something that we need to learn. We need to understand in order to really understand the client-server relationship. And we will start with a small history one-on-one on the client-server walls. So when we talk about classic server rendering, what are we talking about? So in classic server rendering, the product that was common about 15 or 20 years ago, the server generates a display markup and the client runs the interaction logic. You can think about PHP or JSP or everything else that you are familiar with. So in classic server rendering, the browser asks for the server to assemble the page. The server assembles the page on the server side, sending the flat markup into the client and the client gets the markup. That's the classical server rendering. And if they want to make their markup interactive, they just ask the server to send the milestone, the JavaScript, to make them useful. That's classic server rendering.

In client-server rendering, that's a paradigm we started working with about 10 years ago, the client is in charge of generating the display markup and the interaction logic like in React. So, the client asks to assemble the page and the server just sends an empty container and then it's the client's responsibility to ask for React or the JavaScript code to render it themselves. React renders the markup and if there's something else that the client wants, they can ask for the server for another JavaScript code to render the missing part. That's client side rendering. In the new server side rendering, which is the paradigm that we started to work with about two or three or four years ago the server is in charge to generating the display markup and the client is in charge of running the interaction logic. Wait, what? I mean, we've just come full circle from the PHP of 20 years ago to the server side rendering of today. Well, you need to remember that React is a templating language. So you can use it in the server in order to template as well. You might ask yourself why? What is the reason of doing server side rendering? Well, in the past, when we had slow network speeds and slow devices, we had to do everything on the server, right? Because the client wasn't strong enough or powerful enough to render it. As devices became stronger and the customers wanted more complex apps, we shifted rendering into the client. But now as the networks become really fast and there's a lot of complex code that is being sent to the client and our loading standards have become higher, so we want things to be loaded much faster, we have to shift the rendering back to the server. If we talk about performance, those are two criteria that Google checks in their Core Web Vitals. Then cumulative layout shift actually checks what happens when the client renders the markup, but something pops out in between because the client is rendering it incrementally, and then you click on something that you didn't want to click. Or large contentful paint, how much time does it take the client to fetch the data in order to render something, which is a problem in clients' underrendering world. SEO is also a problem, because when Google tries to index our page, they go into the server, they ask for the page, and if the server returns just an empty container, Google doesn't know how to index our page. There's a really good talk by Rich Harris called, Single Page Application Ruined the Web, and generally there's a really good talk in the Twitter sphere, or in the web, about Single Page Application versus Multipage Application, where some people say that multipage applications fall short because they don't give the experience that we want, and other people say that single-page applications, because they load really slow, don't give the performance that we want.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Simplifying Server Components
React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Top Content
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
Exploring React Server Component Fundamentals
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
Top Content
I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.
Server Components: The Epic Tale of Rendering UX
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach
A Practical Guide for Migrating to Server Components
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
The Guild has recently released Envelop - a new, modern GraphQL Server Framework and plugin system. In this talk I’ll share a brief overview of Envelop and why you should probably upgrade your existing GraphQL server to it.
React Server Components
React Day Berlin 2023React Day Berlin 2023
27 min
React Server Components
React Server Components are a newer way of working with React that is widely adopted in frameworks like Next.js. In this talk, we will look under the surface of how they work and are executed on the server side, and how they fit with server rendering and traditional React apps.

Workshops on related topic

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:
- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
Workshop level: 
No matter your current level of React expertise, this workshop will equip you with the knowledge and tools to take your web development game to new heights. Don't miss this opportunity to stay ahead of the curve and master the cutting-edge technology that's changing the face of web development. Sign up now and unleash the full power of React Server Components!
Build a Custom Storefront on Shopify with Hydrogen
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.