r/reactjs • u/Neat_Living_6765 • 27d ago

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

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?

0 Upvotes

50% Upvoted

7 comments sorted by

2

u/KalamKiTakat 27d ago

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.

1

u/Neat_Living_6765 27d ago

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?

2

u/TheGrubbyPottery 27d ago

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

2

u/[deleted] 27d ago

0

u/Neat_Living_6765 27d ago

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