Why Redwood Adopted React Server Components

Rate this content
Bookmark

Redwood, an open source full-stack app framework, has gone all-in on React and React Server Components. Why? Despite RSC’s early stage and complex implementation, Redwood is uniquely positioned to capitalize on RSC capabilities, enabling exciting new features, possibilities, and DX. 

David S. Price
David S. Price
33 min
13 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction to Redwood and React

Short description:

I get the after-lunch crowd. We're going to learn about Redwood. Let's talk about the elephant in the room. Some of you don't know what Redwood is, so we're going to address that. We're also going to talk a lot about RSCs. I'm on the leadership team at Redwood. We love to help make people successful. React Server Components is definitely doing that for Redwood. Redwood is all in on React. There's a lot to come. We're really excited about what's happening with React.

I get the after-lunch crowd. And that's because I'm going to make you be interactive. We're going to have a really good time. We're going to learn about Redwood.

Let's talk about the elephant in the room. Some of you don't know what Redwood is, so we're going to address that. We're also going to talk a lot about RSCs. I'm on the leadership team at Redwood. I mentioned a couple of the things I do. And the most important part of the theme that draws other things together is I love, and the teams I work with, we love to help make people successful. We love to help make others successful, so that can make the Redwood Project successful. And that's a lot of what we're doing. And React Server Components is definitely doing that for Redwood. And we're also hoping that we can move some things with React Server Components forward. But first off, let's just cut to the end here. Are we getting the... There we go. I'm going to cut to the chase. I'm actually going to tell you the point before I do any of the presentation, because who knows what's really going to happen next? All you need to remember is that Redwood is all in on React. So everything I'm about to talk about, the summary at the end is that we're all in on React, and there's a lot to come. We're really excited about what's happening with React, and that's where Red... Because of where React is going, that's where Redwood is going.

2. Your journey with React

Short description:

Your journey with React. This will require a bit of audience participation. Reflect on that time in your journey with React where you felt creative possibility. JavaScript ecosystem gets us excited about what's possible.

All right. Here we go. Engaging part. All right. Your journey with React. So this will require a little bit of audience participation. It's true I actually can't see any of you right now because of the bright light, so I won't know if you're participating, but I'll be able to hear, and it'll be fun, we're going to have a good time. So if you can remember way back when, I want you to reflect on that time in your journey with React very early on where you might have felt that creative possibility. Right? JavaScript ecosystem, we love these kind of things, we get really caught up with shiny things. Why? Because it gets us excited about what's possible. So think way back in.

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

From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
The Worlds Most Expensive React Component and How to Stop Writing It
React Advanced Conference 2021React Advanced Conference 2021
23 min
The Worlds Most Expensive React Component and How to Stop Writing It
Top Content
We need to stop building expensive React components — components that promise the world but are impossible to maintain. Let's fight the apropcylpse and set aside our prop drills with this proposal for a more productive way working in React.
Find Out If Your Design System Is Better Than Nothing
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.
How to achieve layout composition in React
React Summit 2022React Summit 2022
8 min
How to achieve layout composition in React
Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.

Workshops on related topic

Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
From Idea to Production: React Development with a Visual Twist
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Omer Kenet
Omer Kenet
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A
Crash Course into TypeScript for content from headless CMS
React Summit 2022React Summit 2022
98 min
Crash Course into TypeScript for content from headless CMS
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:- Generate strongly typed models and structure for the fetched content.- Use the content in components- Resolve content from rich text fields into React components- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production
You will learn:- How to work with content from headless CMS- How content model can be leveraged to generate TS types and what benefits it brings to your project- How not to use string literals for content in code anymore- How to do rich text resolution into React components- How to minimize or avoid content-related issues before hitting production