React Server Components (RSC)

Experimental Features
21

I’m following the steps in the “Getting Started” section and am bumping into errors.

  • npx -y create-redwood-app@canary -y rsc_test
  • cd rsc_test
    • added: yarn install
  • yarn rw experimental setup-streaming-ssr -f
  • yarn rw experimental setup-rsc
  • yarn rw build
  • yarn rw serve

Error during serve:

renderFromDist HomePage
renderFromDist FatalErrorPage
renderFromDist AboutPage
[HPM] Proxy created: /  -> http://127.0.0.1:8911
[HPM] Proxy rewrite rule created: "^/.redwood/functions" ~> ""
Started production FE server on http://localhost:8910
Error: The following dependencies are imported but could not be resolved:

  src/pages/FatalErrorPage (imported by C:/Users/bburnworth/Documents/Code/rsc_test/web/src/App.tsx)
  src/Routes (imported by C:/Users/bburnworth/Documents/Code/rsc_test/web/src/App.tsx)

Are they installed?
    at file:///C:/Users/bburnworth/Documents/Code/rsc_test/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:52405:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///C:/Users/bburnworth/Documents/Code/rsc_test/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:51817:38

...

 - Here's your unique error reference to quote: '6399bce4-d9f6-490c-8adb-8fc2ce076088'

Output of yarn rw info:

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.11.1 - C:\Users\BBURNW~1\AppData\Local\Temp\xfs-b46f4e63\node.CMD
    Yarn: 4.1.1 - C:\Users\BBURNW~1\AppData\Local\Temp\xfs-b46f4e63\yarn.CMD
  Browsers:
    Edge: Chromium (123.0.2420.65)
  npmPackages:
    @redwoodjs/core: 8.0.0-canary.426 => 8.0.0-canary.426+e11c9a2a6
    @redwoodjs/project-config: 8.0.0-canary.426 => 8.0.0-canary.426+e11c9a2a6

Any suggestions for me to move forward?

22

Can we name it Redwood “Professional”? :smiley: Classic sounds quite like deprecated :confused:

23

“Classic” is just my invention and not a proper name — I guess I was thinking back on the coca-cola classic brand that basically ended up becoming just cocoa-cola in the end anyway.

Which makes sense because one of the superpowers will be to use Ssr and RSC and GraphQL interchangeably in one app which is powerful.

1 Like
24

Hey RW team -

Excited to try out RSC. Question - is there a way to use RSC for a part of an existing app, while keeping everything else on GraphQL? What would be the upgrade pattern to be able to do that?

Use case: I have a project that leverages GraphQL heavily, so I want to keep that. But I want to build a chatbot using the Vercel AI SDK, which requires RSC.

Thanks,
Emi

25

Hi @emigal - that’s our intention: do be able to co-mingle both GraphQL and RSC data fetching as needed.

There’s still work to be done on RSC support such as auth and routing and deployment and such.

What is is specifically about the Vercel AI that requires RSC? Can you share an example? Might there be another way - I assume trying Langbase didn’t solve the issues?

26

@dthyresson awesome, looking forward to being able to use RSC alongside my current GraphQL setup.

In terms of why we need RSC for Vercel AI SDK:

  • First, streaming. I know you can technically do streaming through Realtime, however only if you’re on a serverful environment (I’m hosting on Vercel). This applies to Langchain, too.

  • Second, Vercel AI SDK 3 has some nifty stuff like Generative UI (some demos here). However, this uses RSC heavily.

Would be great to have a rough idea of when you think the RW RSC implementation will be ready for production!

Thanks!

27

@PantheRedEye I am getting the same error, but I just proceeded, and my simple example app works.

My goal was/is to use the Vercel AI SDK. And, I just got a simple demo working! Here’s how I did it…

I read through https://redwoodjs.com/blog/rsc-now-in-redwoodjs. Then stepped through the “Creating Your Own App” section of the doc.

After getting the basic example going, I did the following…

Reviewed Getting Started - Vercel AI SDK. The article shows a Next.js version and a SvelteKit version (I’d like to add a RedwoodJS version). The Next.js example code is close to what works in Redwood. The setup steps need to be adjusted for Redwood.

yarn workspace web add ai openai zod

yarn workspace api add ai openai zod

yarn rw g function chat . Then I added the following code into api/src/functions/chat.ts (this code is adjusted slightly from the Vercel Quick Start to handle the APIGatewayEvent).

import { OpenAIStream, StreamingTextResponse } from 'ai'
import type { APIGatewayEvent, Context } from 'aws-lambda'
import OpenAI from 'openai'

import { logger } from 'src/lib/logger'
export const handler = async (event: APIGatewayEvent, _context: Context) => {
  logger.info(`${event.httpMethod} ${event.path}: chat function`)
  const requestBody = JSON.parse(event.body)
  const messages = requestBody.messages

  // Create an OpenAI API client
  const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
  })
  // Ask OpenAI for a streaming chat completion given the prompt
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages,
  })

  // Convert the response into a friendly text-stream
  const stream = OpenAIStream(response)
  // Respond with the stream
  return new StreamingTextResponse(stream)

}

yarn rw g page chat . Then I added the following code into /web/src/pages/ChatPage/ChatPage.ts (this is very close to the code from the Vercel Quick Start, I updated the function signature).

'use client'

import { useChat } from 'ai/react'

const ChatPage = () => {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/.redwood/functions/chat',
  })
  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map((m) => (
        <div key={m.id} className="whitespace-pre-wrap">
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  )
}

export default ChatPage

Updated the entries.ts file, adding ChatPage.

Added my OPENAI_API_KEY to .env.

yarn rw build

yarn rw serve

Test.

Worked!

Do happy dance :man_dancing:

2 Likes
28

“Redwood GQL”

?

1 Like
29

@keith.t.elliott just followed your guide to set up Vercel AI SDK and it worked like a charm - thank you!

1 Like
30

Hey folks - just came over to try the RSC integration after the 8.0 announcement and I tried 3-4 times to install fresh and run commands found in the announcement post, in the blog post from March and this thread and everything ends up giving errors either related to yarn, or this:

rollup failed to resolve import "react-server-dom-webpack/client" from "/Users/wesbos/Sites/my-redwood-project/node_modules/@redwoodjs/router/dist/rsc/RscRoutes.js"

Is the RSC stuff usable yet? Would love a docs page or a single command to get everything running!

2 Likes
31

Hey @wesbos :wave: Excited to see you here :grin:

What versions of node and yarn are you running?

I know I’ve hit errors if I’m running anything less than node v20.17.0 and yarn 4. If this doesn’t fix it, can you share more details about your dev environment?

RE: RSC + SSR being usable. It’s all still experimental and a WIP. We have RSC + SSR + Server Actions working (we have a demo here - timestamp 13:31). Right now, we’re working on the dev server to improve speed.

32

And for anyone else who ends up here looking for instructions to get started, please go to https://redwoodjs.com/server-components for the latest info

33

I finally managed to reproduce your specific issue locally, and have merged a fix!

34

Over the last week we’ve made several improvements to the RSC getting-started experience. So if anyone tried and just couldn’t get anything working - please try again!

It’s still experimental. Still very much work-in-progress. Still very much unpolished.
But at least you should be able to get our (ugly :nail_care:) test project running!

3 Likes
35

amazing - thank you! Looking forward to giving it a go.

36

Here’s a status update on RSC. Each item has a number, 0-5, assigned to it. 0 means not started. 5 means completely done. We’re aiming to get everything to a 4 or 5 before we feel ready for a proper public announcement of RSC support in RW.

RSC Status Report

Initial understanding of RSC as a concept
5

Render Flight (RSC Payload) from the server, on the client
5

Build system (yarn rw build and yarn rw serve)
4: Works, but is too slow. Still some more DX work to be done around noExternal

Dev server (yarn rw dev)
1: Have general understanding. Work not really started yet.

Auth
3-4: Works, but some more work needed

Data fetching. Server cells.
4: Need a generator

Setup command
4: Mostly would like to have a nicer default template we ship with

Server Actions
3-4: Works alright. Still might have to do some tweaks around how we return data and handle refreshes. Need to figure out redirects and error reporting.

Routing (client, and server-side)
3-4: It works, but I’ve realized we don’t follow React’s updated guidelines around useTransition and Suspsense

SSR
4: Some edge-cases where React can’t pick up rendering where it left off. Shows up as an error message in the browser console

CI
4: We have CI running. But recent events shows we don’t have 100% coverage. Especially for Windows.

AST parsing for Client components and Server Actions
4: There are still some unusual variations of Server Action definitions we don’t support.

Docs
0: No documentation yet

Sample App
4: Existing app works, and shows off current features and functionality.
0: We want something new. Something that’s easier on the eyes :smile: It’s not started

Hosting
2: Not really started, but we have a very good idea about what needs to be done. Easiest: Baremetal documentation / Docker instance on Fly / Grove

3 Likes
37

Quick update here

That :point_up: is what we’ve been focusing on for the last two weeks.

As most of you probably know we’re building on top of Vite. More specifically we’re using Vite version 5. The Vite team is getting close to releasing Vite 6 which will bring experimental support for features that will make implementing the dev server, and other RSC related features, easier.
We don’t want to be held back waiting for the Vite team. But at the same time we want to be able to jump to Vite 6 as soon as possible.

So we’ve been working on RSC support on both Vite 5 and 6 in parallell.

Our Vite 5 implementation is more complete, but is lacking dev server support
Our Vite 6 implementation is less fleshed out, but does have dev server support :slight_smile:

So the work right now is to take what we’ve learned from implementing the dev server in Vite 6 and add that to our (much more involved, since it does more things) Vite 5 implementation.

On my 0-5 scale I’d say we’re now at a 2 for the Vite 5 dev server.
As soon as we get it to a 4 we feel that part of the whole RSC story is ready for an initial RSC support announcement :slight_smile:

4 Likes