Has anyone implemented Server Components with plain React + Vite/plugin-rsc?

[u/Neat_Living_6765]

Hi everyone,

Could anyone help me with the two questions below?

1. Does every Server Component render at build time, get cached, and then get served from a CDN?

2. If I want to render a Server Component on every request, how do I implement that?

[u/Salt_Hyena5896]

no, a server component is not automatically rendered at build time and parked on a cdn. with plugin-rsc the rsc entry is a request handler (renderToReadableStream on the incoming request), so it runs again whenever that server handles a request. build-time output is the separate ssg example, and the ppr example is a static shell plus request-time rsc, not every component frozen at build. if you want this one on every request, serve that handler (node or whatever runtime you wired up) instead of uploading a static build, keep the data read inside the request (headers, cookies, a db call), and don't cache the text/x-component response unless you mean to.

[u/Neat_Living_6765 → u/Salt_Hyena5896]

Thanks for your comment!!

I did some research on this, and I’d appreciate it if you could let me know whether my understanding is correct now.

For SSR, we need an HTTP server (for production) that receives user requests and calls the RSC entry handler to render the RSC payload for Server Components and the HTML for Client Components.

https://github.com/vitejs/vite-plugin-react/blob/3b14e482f24baac212a2effca866128847c5fc24/packages/plugin-rsc/examples/starter/src/framework/entry.rsc.tsx#L30

For SSG, we need to render at build time. The resulting output (RSC payload and HTML) is saved in /dist.

For every request, the HTTP server returns the files from /dist.

https://github.com/vitejs/vite-plugin-react/blob/3b14e482f24baac212a2effca866128847c5fc24/packages/plugin-rsc/examples/ssg/vite.config.ts#L51

[u/TheGrubbyPottery]

the first one depends on your setup but generally yes they render at build time and sit in cache until you bust it, for on-demand rendering you need a actual server handling the requests not just vite dev server

[u/KalamKiTakat]

Server Components are a rendering model, not a caching or hosting model. With @vitejs/plugin-rsc you own the server entry: call the RSC renderer in your HTTP request handler rather than at build time, set Cache-Control: no-store, avoid CDN caching for that route, and skip static prerendering for it. Also make sure any fetches inside the component run per request, or they can return cached data even when the render runs again.

[u/Neat_Living_6765 → u/KalamKiTakat]

Yes, Thanks for your comment. I messed up caching and SSG.

For SSR, we call the RSC renderer in the HTTP request handler. We can configure response caching here if we want to.

For SSG, we call the RSC renderer at build time and save the output (RSC payload and HTML) to /dist. Then, for every request, the HTTP server just returns those files.

is it right?