RSCs

Loading "Rscs"
πŸ‘¨β€πŸ’Ό Right now we have to load all the data of our app and pass the result as props to our components. Additionally, we're sending a bunch of code to the client to render a page that really doesn't need to be on the client. We want you to solve both of these problems by using react-server-dom-esm which will allow us to generate serialized JSX on the server and render it in the browser.

πŸ¦‰ react-server export

One important thing to remember is that on the server, React components cannot use hooks like useState, useEffect, etc. You should think of RSCs as a one-time template because they'll never be interactive.
This can be confusing and even cause problems if you're not careful. That's why React packages have a special version for your RSC server so you don't make this mistake. You actually don't have to change your code at all for this to work. Instead, you change the environment in which your code is running.
On the server, Node.js has an algorithm to resolve module imports like react and react-server-dom-esm. It's a fair bit complex, so to be brief, I'll just say that in the package.json of react packages, you'll find something like this:
{
	"exports": {
		".": {
			"react-server": "./react.react-server.js",
			"default": "./index.js"
		},
		"./package.json": "./package.json",
		"./jsx-runtime": {
			"react-server": "./jsx-runtime.react-server.js",
			"default": "./jsx-runtime.js"
		},
		"./jsx-dev-runtime": "./jsx-dev-runtime.js"
	}
}
This is configuration for the node resolver so the correct version of React is resolved based on the environment. In our RSC environment, we want to tell Node to resolve to the react-server export.
This is done by setting the --conditions flag in the node command. This flag is used to set the environment in which the code is running. In our case, we want to set the environment to react-server.
🐨 So before you do anything else, update the dev script in the file to add --conditions=react-server:
node --conditions=react-server --watch server/app.js
Note: the order of the --watch and --conditions does matter! Put conditions first and watch second as it appears above.
Once you have that done, you can restart your dev server and for any package that has a special export for an RSC environment, Node will resolve to that version of the package.
πŸ“œ You can learn more about the benefits of this decision from the Server Module Conventions RFC

πŸ‘¨β€πŸ’Ό Continue

Great, from here, you can proceed to update to properly map the react-server-dom-esm/client import to the correct URL. Once you have that done, you can update to switch from an /api route that serves data to an /rsc route that serves the RSCs.
Then finally you'll be able to go to the file and update that to fetch the RSCs from the server and render them using the react-server-dom-esm/client package.
Login to get access to the exclusive discord channel.
  • General
    AI Assistant?
    John πŸš€:
    Kent has mentioned an AI assistant that he's using in VSCode. Is there any detail on what that is an...
    • βœ…2
    2 Β· 25 days ago
  • General
    βš›οΈFundamentals
    Error boundary good practice
    Lloren πŸš€:
    I have always wondered if the error boundary is there a limit of error boundary that you can impleme...
    • βœ…1
    1 Β· a month ago
  • General
    Script to save playground folder
    larissapissurno πŸš€:
    Hi all, I personally like to take notes on the playground files, so in order to not lose this notes ...
    • βœ…1
    2 Β· a month ago
  • General
    Runninng Learning app on iPad?
    marcus_polonus πŸš€:
    Hi all, Did anyone managed to setup learning app on iPad? I tried to use codesandbox, but when I am...
    • βœ…1
    1 Β· a month ago
  • General
    Welcome to EpicReact.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    Welcome to the first of many posts in the EpicReact.dev channel! Take a moment to introduce yourself...
    • πŸš€5
    46 Β· 17 days ago
  • General
    Launch editor error: Could not open 'index.html' from:'playground' in the editor.
    Japhet πŸš€ πŸ†:
    I'm encountering an issue when trying to open a link from the file list. The error message I receive...
    • βœ…1
    15 Β· a month ago
  • General
    Received this error when running the setup script for React Fundamentals
    ChrisP πŸš€:
    Hey guys, I am completely blocked at the moment. When I clone and run the setup for react fundamenta...
    • βœ…1
    2 Β· a month ago
  • General
    Unexpected server error (workshop-app does not load onboarding step)
    Matias 🌌 πŸš€:
    Hey! πŸ‘‹ I installed the free workshop "Build React Hooks" last week with no issues. Yesterday, whe...
    • βœ…1
    3 Β· a month ago
  • General
    Eye opening moment in 05/06 (β€žsatisfiesβ€œ operator of typescript)
    Chrigi πŸš€:
    Up until today I was not aware that having the type annotation on a variable is actually a type-cast...
    • πŸ™Œ2
    • βœ…1
    2 Β· a month ago
  • General
    Launch editor error: spawn code ENOENT
    Andrew Elans 🌌 πŸš€:
    Clicking index.html gives this error in VS Code. Both from Chrome and Safari. Anyone?
    • βœ…2
    4 Β· 2 months ago
  • General
    Failed to fetch dynamically imported module...
    FacuPerezM:
    I am getting this error out of nowhere, in the 'test' tab inside the Workshop app. ``` Failed to f...
    • βœ…1
    3 Β· a month ago
  • General
    Epicshop not saving the video resolution
    Toni πŸš€ 🌌:
    Playback speed and caption settings are saved, but the video resolution always defaults to auto. Is ...
    • βœ…1
    7 Β· 2 months ago
  • General
    Clicking an exercise file launch VIM instead of VS Code
    DBattou πŸš€:
    I started going through the workshops, everything is setup and working fine except for opening a fil...
    • βœ…1
    2 Β· a month ago