React Server Components (RSC)

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?

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

“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

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

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?

@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!