Unlocking the Potential of React Server Components

Discover the importance of React Server Components through various talks and workshops. Topics include the benefits of server-side rendering, TypeScript techniques, and solving user interface issues. Learn about SuspenseSSL, Next.js, and server-side fetching to enhance performance and user experience.

The Evolution and Benefits of Server-Side Rendering

Liad Yosef delves into the significance and evolution of server-side rendering. He emphasizes its benefits, such as improved performance and SEO. He explores various rendering strategies and tackles the challenges associated with hydration in React.

He introduces SuspenseSSL in React 18, a novel solution for pre-fetching data and selectively hydrating components. Moreover, he highlights React Server Components as a revolutionary approach to reducing bundle size during rendering with React.

Learn more

Mastering TypeScript Techniques and React Server Components

This workshop covers an extensive range of TypeScript techniques, including type checking, compiling code, and more. Participants learn about operator satisfies, creating type mappings, and manipulating types with template literal strings. The use of opaque types for enhanced type safety is also discussed.

Additionally, the workshop introduces Next.js and React Server Components for efficient server-side rendering and direct data fetching. It underscores the importance of type checking, CI setup, and preventing undefined errors, offering practical insights into custom type mappings and type assertions.

Learn more

Enhancing User Experience with React Server Components

This talk addresses the solution React Server Components provide for CPU-bound and network-bound web application issues. It explains how read-only content can be rendered on the server while interactive elements are sent to the client. This reduces the code shipped and enhances performance.

Further, it explores how server-side rendering and server-side fetching can significantly improve user experience by minimizing delays and unstyled content. The talk also covers soft navigation with server components and the advantages of using frameworks like Next.js for debugging and deployment.

Learn more

FAQ

Other related articles

Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style

React Summit US 2023

16 min

Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style

Watch video: Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style

Pillippa Pérez Pons

Pillippa is a dedicated software developer and avid React enthusiast

Welcome to the server components to the rescue, turbo charging and empowering your React application with style. React server components were introduced three years ago, providing an easy-to-maintain and quick-to-build solution with improved metrics and user experience. By using server-side rendering, there is no need to download code to the client at startup. Server components reduce the cost of attractions and provide a unified solution. The future of React server components includes improving state synchronization, allowing server components to re-render in response to state changes, and enabling fluid UI updates without page refresh.

react server components

A Practical Guide for Migrating to Server Components

React Advanced 2023

28 min

A Practical Guide for Migrating to Server Components

Top Content

Watch video: A Practical Guide for Migrating to Server Components

Fredrik Höglund

ephem.dev

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react react query next.js case study react server components react 18

And Now You Understand React Server Components

React Summit 2024

27 min

And Now You Understand React Server Components

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.

react server components

Server Components: The Epic Tale of Rendering UX

React Summit 2023

26 min

Server Components: The Epic Tale of Rendering UX

Top Content

Watch video: Server Components: The Epic Tale of Rendering UX

Nikhil Sharma

Postman

This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.

react performance ssr react server components react 18

Building Reusable Server Components in NextJS

React Summit US 2023

88 min

Building Reusable Server Components in NextJS

Workshop

2 authors

React continues to evolve their beta capability, React Server Components, and they're continuing to further develop them in partnership with frameworks like NextJS.In this workshop, attendees will learn what React Server Components are, how to effectively build and use them in NextJS, and focus on one of the major advantages of React/NextJS: reusability through components.We will also cover related beta technologies enabled by the `app` directory, such as nested layouts and server actions (alpha/experimental capability).Join us for this hands-on, 120 minute workshop!Technologies:
React, JavaScript/Typescript, NextJS, Miro

next.js react server components

React Server Components from Scratch

React Summit US 2023

29 min

React Server Components from Scratch

Watch video: React Server Components from Scratch

Benjamin Holmes

Ben is a full-stack developer, open source maintainer, and whiteboardist making the web a little better.

This Talk introduces React Server Components and provides a step-by-step guide on building and rendering them. It explores the capabilities of server components, including interactivity and streaming. The Talk also covers the process of incorporating client-side rendering and the challenges of bundling and mapping client components. Additionally, it discusses the importance of supporting React Server Components and the ongoing efforts to integrate them with different bundlers.

react case study react server components astro react

Simplifying Server Components

React Advanced 2023

27 min

Simplifying Server Components

Top Content

Watch video: Simplifying Server Components

Mark Dalgleish

Shopify

React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.

react server components

Next.js for React.js Developers

React Day Berlin 2023

157 min

Next.js for React.js Developers

Top Content

Workshop

Adrian Hajdin

In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions.
By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.

react nextjs react

Bringing React Server Components to React Native

React Day Berlin 2023

29 min

Bringing React Server Components to React Native

Top Content

Watch video: Bringing React Server Components to React Native

Szymon Rybczak

Callstack

React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.

react native react server components backend for react native react native server components repack react native

React Server Components Unleashed: A Deep Dive into Next-Gen Web Development

React Day Berlin 2023

149 min

React Server Components Unleashed: A Deep Dive into Next-Gen Web Development

Workshop

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

javascript react server components

Hydration, Islands, Streaming, Resumability… Oh My!

React Advanced 2023

26 min

Hydration, Islands, Streaming, Resumability… Oh My!

Watch video: Hydration, Islands, Streaming, Resumability… Oh My!

Matheus Albuquerque

I'm a Sr. Front-End Engineer at Medallia

Today's Talk introduces the concepts of hydration and off islands, explores the benefits of islands for enhancing server-side rendered HTML with client-side JavaScript, discusses the lazy approach of re-zoomability and its advantages over traditional hydration, highlights the use of resumability and concurrent React for improved rendering performance, examines the features and concerns of React server components, touches on the co-location of client and server code, and explores future trends in rendering and navigation. The Talk also reflects on past ideas and emphasizes the importance of identifying core metrics for performance optimization.

react architecture react server components deep dive react query nextjs

Hydrogen: An Early Look at Server Components in the Wild

React Advanced 2022

7 min

Hydrogen: An Early Look at Server Components in the Wild

Daniel Rios Pavia

Personio

Hydrogen and server components are being used by big merchants in production sites to build headless storefronts quickly. React 18 introduces server components that allow for interactive rendering without adding anything to the bundle. However, not all libraries are compatible and data fetching can slow down the site, but React provides suspense to handle heavy components. Server components offer great encapsulation and fast rendering via HTML, and the future of headless is promising with technologies like Edgeworkers and hosting platforms like Oxygen. Shopify is hiring and offers a demo shop with server components at addogen.new.

react server components hydrogen shopify

Zero Bundle Size Server Components

React Advanced 2022

17 min

Zero Bundle Size Server Components

Aashima Ahuja

Freelance Consultant

React Server Components is a recent feature introduced with the React team and launched with Next.js 12. They allow for rendering components on the server, improving performance and data fetching. Server components can be used alongside client-side rendering and provide direct access to server resources. However, they are still in the experimental stage and have some limitations, such as not being able to use hooks or event handlers. Challenges include importing server components in client components and making third-party API calls.

react performance react server components react 18

Why Redwood Adopted React Server Components

React Summit US 2023

33 min

Why Redwood Adopted React Server Components

Watch video: Why Redwood Adopted React Server Components

David S. Price

Сo-founder of RedwoodJS

Redwood is a full stack web app framework built with React, GraphQL, and Prisma. It prioritizes conventions and maintainability, and collaborates closely with the React team. Redwood offers full-stack features, including real-time functionality without WebSockets. The Bighorn Epoch is a new phase in Redwood's roadmap. Redwood is excited about the possibilities of React Server Components and wants to collaborate with the community.

react components redwoodjs

React Server Components - Under the Hood

React Advanced 2021

19 min

React Server Components - Under the Hood

Lee Rowlands

PreviousNext

This talk provides an overview of React Server Components. It explores rendering the root element, using react-read-in-a-tree to read the webpack manifest, and performing work and JSON serialization. The talk also discusses the drain handler and client-side components, as well as challenges and future improvements in React Server Components.

react react server components

Living on the Edge

React Advanced 2021

36 min

Living on the Edge

Sunil Pai

Cloudflare

The Talk discusses the future of React and introduces new APIs, including streaming rendering and server components. React Suspense allows for asynchronous loading of components and data fetching. The use of serverless computing, specifically Cloudflare Workers, is explored as a way to improve performance. The Talk emphasizes the potential for simplifying the React ecosystem and the excitement about the new API.

react web development react 18 cloudflare

The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development

React Summit US 2023

160 min

The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development

Top Content

WorkshopFree

Amy Dutton

This workshop will guide you through the product development life cycle of creating a real-world web application. You will learn about React Server Components, building a design system within Storybook, and using frontend development to approach becoming a full-stack developer. The workshop will cover increasing confidence in your application with unit tests and implementing authentication and authorization. You'll have the opportunity to work through product features and examine a real-world RedwoodJS project, gaining valuable experience in real-world product development. RedwoodJS makes it simple to approach full-stack development, and this workshop will give you the skills you need to create your own real-world web applications.

react react server components