How to Setup Redwood Experimental React Server Components
Experimental Code with Limited Functionality
This is the bleeding edge of Redwood development. Proceed accordingly.
CURRENT FUNCTIONALITY and EXPECTATIONS
ā You can render one or more client components inside the main App server component
ā CSS in external .css files is supported
ā CSS Modules are supported
⤫ Right now there is no router support. So thereās only a main App.tsx server component.
⤫ Last time we tried to use React Server Component libraries (npm packages) they didnāt work. So probably still donāt.
⤫ There is no yarn rw dev equivalent. You have to build and serve. And you have to do that manually for every change you make. No automatic reloading.
Code: RSC PRs
RSC-related PRs target the main branch; a @canary is published for each merged PR
Last time we tried to use React Server Component libraries (npm packages) they didnāt work. So probably still donāt.
are you setting the react-server condition anywhere? i think i had an issue where i was applying the condition to user code but not external packages or my react overrides. that was in webpack though
(easiest way to check is npm i server-only and then import 'server-only'; in RSC code. if that works youāre good)
idk your setup, but if youāre running Vite over RSC code (from a quick look, I think I saw a rscIndexPlugin() somewhere?) then you probably need to tell Vite to use that condition too ā that obv affects how itāll resolve imports of things like server-only
@lubieowoce You were right all along. Thereās a bug with Vite where it doesnāt care about the conditions (like react-server) that you pass into it when SSR loading modules
Some exciting new developments! Redwood now supports React Server Functions aka React Server Actions
Server Functions is a way for client components to directly call functions on the server. For this to work the server function needs to be placed in a separate file with a 'use server' directive at the top.
It can look like this
'use server'
// module state on server
let counter = 0
export const getCounter = () => counter
export const increment = () => {
counter += 1
}
Note that this is just a simple example - not best-practice. counter will be shared by everyone!
Pressing āIncrement server counterā in the client component will update counter on the server and re-render the page.
Iāve youāve tried Server Actions in Next you should know that the RW implementation is still very limited. For example you canāt yet add use server inside a function to make it a server action. You can only make an entire file a āReact Server Functions-fileā.
Redwoodās RSC implementation now supports using React Server Functions/Server Actions as form actions. I.e. <form action={onSendServerAction()}>. Iāve also made it support importing npm packages that have react components that uses the 'use client' directive.
Hereās a video demonstrating both those features by calling ChatGTP to build an AI chatbot:
Iāve created a bunch of demo repos for RSCs, including the AI chatbot one from the post above (do note that you need to add your own OpenAI API key to .env for that one to work)