https://rsc.krasimirtsonev.com/

Features support list across different frameworks and libraries.

There are 12 test cases in total. You can see them all in the table below. Testing against the following frameworks/libraries:

• Next.js (100% support) - Probably the most popular React framework
• Vite (100% support) - Official Vite plugin for React Server Components. Framework agnostic.
• Waku (100% support) - A React framework with first-class support for React Server Components
• Twofold (100% support) - A framework for building projects with React Server Components, Tailwind, and TypeScript.
• react-server (100% support) - The easiest way to build React apps with server-side rendering
• Forket (83% support) - A framework agnostic library that produces server and client version of your code. Plugable to your current setup.
• Parcel (83% support) - Official Parcel support for React Server Components. Framework agnostic.
• ReactRouter (83% support) - Experimental version of React Router with RSC support
• RedwoodSDK (83% support) - A full-stack React framework

• Do not edit manually the README.md files. There are templates in ./scripts/templates.
• If you want to update any of the test cases change the files in the ./cases directory. Then run npm run build. This will distribute them across the apps in the ./apps directory.
• Some of the frameworks/libraries need slightly different format of the test cases. That's why there are helper for that in ./scripts/vendors.

Modify the files in the ./cases diretory and run npm run build.

Add a new directory in the ./cases folder. Make sure there is case.json and Page.tsx file. Use some of the existing ones as a template. Then edit ./app.json to reflect the support level.

Edit ./app.json and APPS array in ./scripts/build.js. Use the Next.js definition as a template. Have in mind that you can modify the cases source code so they fit the specifics of the suggested solution. Look for processFile and setup functions. Use the npm run build command to copy the cases (and format them) in the relevant directory.

Case	Framework / Library
(01) Rendering async component on the server Basic example of an async server component.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(02) Mixing server and client components Passing server generated data as a child of a client component.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(03) Hydrating client component A client component that is hydrated with children passed from the server component.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(04) Passing server function to client component A client component receives a server function as a prop and calls it.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(05) Client component imports server function A client component imports server function and uses it.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(06) Inlined server function (inside a server component) Creating a server function and pass it as a prop to client component	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ❌ Parcel ❌ ReactRouter ❌ RedwoodSDK
(07) Server Functions with Actions A server function is called inside a client component within a form submit handler to demonstrate server-side processing in response to a form submission.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(08) Server Functions with useActionState A server function is used as the action for a form to demonstrate server-side processing in response to a form submission.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(09) Passing promise from server to client component A server component passes a promise to a client component which "awaits" it and renders the result.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(10) Inspirational quote generator app An app that generates and displays inspirational quotes to motivate users. Little app from here.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ✅ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(11) Nested Client Components A test case for nested client components	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ❌ Forket ✅ Parcel ✅ ReactRouter ✅ RedwoodSDK
(12) Inlined server action to access variables in the near scope When we define an inlined server action inside a component, it should be able to access variables in the near scope. This means that the server function is aware of its surrounding context.	✅ Next.js ✅ Vite ✅ Waku ✅ Twofold ✅ react-server ❌ Forket ❌ Parcel ❌ ReactRouter ❌ RedwoodSDK