{"id":209,"date":"2026-02-11T00:00:00","date_gmt":"2026-02-11T00:00:00","guid":{"rendered":"https:\/\/wordpress.securinsight.ca\/index.php\/2026\/02\/11\/workers-improved-react-server-components-support-in-the-cloudflare-vite-plugin\/"},"modified":"2026-02-11T00:00:00","modified_gmt":"2026-02-11T00:00:00","slug":"workers-improved-react-server-components-support-in-the-cloudflare-vite-plugin","status":"publish","type":"post","link":"https:\/\/wordpress.securinsight.ca\/index.php\/2026\/02\/11\/workers-improved-react-server-components-support-in-the-cloudflare-vite-plugin\/","title":{"rendered":"Workers &#8211; Improved React Server Components support in the Cloudflare Vite plugin"},"content":{"rendered":"<p>The Cloudflare Vite plugin now integrates seamlessly <a href=\"https:\/\/github.com\/vitejs\/vite-plugin-react\/tree\/main\/packages\/plugin-rsc\" target=\"_blank\">@vitejs\/plugin-rsc<\/a>, the official Vite plugin for <a href=\"https:\/\/react.dev\/reference\/rsc\/server-components\" target=\"_blank\">React Server Components<\/a>.<\/p>\n<p>A <code>childEnvironments<\/code> option has been added to the plugin config to enable using multiple environments within a single Worker.<br \/>\nThe parent environment can then import modules from a child environment in order to access a separate module graph.<br \/>\nFor a typical RSC use case, the plugin might be configured as in the following example:<\/p>\n<div>\n<figure>\n<pre data-language=\"ts\"><code class=\"language-ts\"><div><div><span>export<\/span><span> <\/span><span>default<\/span><span> <\/span><span>defineConfig<\/span><span>(<\/span><span>{<\/span><\/div><\/div><div><div><span><span>  <\/span><\/span><span>plugins<\/span><span>:<\/span><span> [<\/span><\/div><\/div><div><div><span>    <\/span><span>cloudflare<\/span><span>(<\/span><span>{<\/span><\/div><\/div><div><div><span><span>      <\/span><\/span><span>viteEnvironment<\/span><span>:<\/span><span> <\/span><span>{<\/span><\/div><\/div><div><div><span><span>        <\/span><\/span><span>name<\/span><span>:<\/span><span> <\/span><span>\"rsc\"<\/span><span>,<\/span><\/div><\/div><div><div><span><span>        <\/span><\/span><span>childEnvironments<\/span><span>:<\/span><span> [<\/span><span>\"ssr\"<\/span><span>]<\/span><span>,<\/span><\/div><\/div><div><div><span>      <\/span><span>},<\/span><\/div><\/div><div><div><span>    <\/span><span>}<\/span><span>)<\/span><span>,<\/span><\/div><\/div><div><div><span><span>  <\/span><\/span><span>]<\/span><span>,<\/span><\/div><\/div><div><div><span>}<\/span><span>)<\/span><span>;<\/span><\/div><\/div><\/code><\/pre>\n<div>\n<div><\/div>\n<\/div>\n<\/figure>\n<\/div>\n<p><code>@vitejs\/plugin-rsc<\/code> provides the lower level functionality that frameworks, such as <a href=\"https:\/\/reactrouter.com\/how-to\/react-server-components\" target=\"_blank\">React Router<\/a>, build upon.<br \/>\nThe GitHub repository includes a <a href=\"https:\/\/github.com\/vitejs\/vite-plugin-react\/tree\/f066114c3e6bf18f5209ff3d3ef6bf1ab46d3866\/packages\/plugin-rsc\/examples\/starter-cf-single\" target=\"_blank\">basic Cloudflare example<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Cloudflare Vite plugin now integrates seamlessly @vitejs\/plugin-rsc, the official Vite plugin for React Server Components. A childEnvironments option has been added to the plugin config to enable using multiple environments within a single Worker. The parent environment can then import modules from a child environment in order to access a separate module graph. For [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-209","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/posts\/209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/comments?post=209"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/posts\/209\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/media?parent=209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/categories?post=209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.securinsight.ca\/index.php\/wp-json\/wp\/v2\/tags?post=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}