diff --git a/integration/vite-hmr-hdr-rsc-test.ts b/integration/vite-hmr-hdr-rsc-test.ts
new file mode 100644
index 0000000000..0fd031af35
--- /dev/null
+++ b/integration/vite-hmr-hdr-rsc-test.ts
@@ -0,0 +1,431 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { expect } from "@playwright/test";
+
+import type { Files, TemplateName } from "./helpers/vite.js";
+import {
+ test,
+ createEditor,
+ viteConfig,
+ reactRouterConfig,
+} from "./helpers/vite.js";
+
+const templateName = "rsc-vite-framework" as const satisfies TemplateName;
+
+test.describe("Vite HMR & HDR (RSC)", () => {
+ test("vite dev", async ({ page, dev }) => {
+ let files: Files = async ({ port }) => ({
+ "vite.config.js": await viteConfig.basic({ port, templateName }),
+ "react-router.config.ts": reactRouterConfig({
+ viteEnvironmentApi: templateName.includes("rsc"),
+ }),
+ "app/routes/hmr/route.tsx": `
+ // imports
+ import { Mounted } from "./route.client";
+
+ // loader
+
+ export function ServerComponent() {
+ return (
+
+
Index
+
+
+
HMR updated: 0
+ {/* elements */}
+
Mounted: {mounted ? "yes" : "no"}
;
+ }
+ `,
+ });
+ let { cwd, port } = await dev(files, templateName);
+ let edit = createEditor(cwd);
+
+ // setup: initial render
+ await page.goto(`http://localhost:${port}/hmr`, {
+ waitUntil: "networkidle",
+ });
+ await expect(page.locator("#index [data-title]")).toHaveText("Index");
+
+ // setup: hydration
+ await expect(page.locator("#index [data-mounted]")).toHaveText(
+ "Mounted: yes",
+ );
+
+ // setup: browser state
+ let hmrStatus = page.locator("#index [data-hmr]");
+
+ await expect(hmrStatus).toHaveText("HMR updated: 0");
+ let input = page.locator("#index input");
+ await expect(input).toBeVisible();
+ await input.type("stateful");
+ expect(page.errors).toEqual([]);
+
+ // route: HMR
+ await edit("app/routes/hmr/route.tsx", (contents) =>
+ contents.replace("HMR updated: 0", "HMR updated: 1"),
+ );
+ await page.waitForLoadState("networkidle");
+
+ await expect(hmrStatus).toHaveText("HMR updated: 1");
+ await expect(input).toHaveValue("stateful");
+ expect(page.errors).toEqual([]);
+
+ // route: add loader
+ await edit("app/routes/hmr/route.tsx", (contents) =>
+ contents
+ .replace(
+ "// loader",
+ `// loader\nexport const loader = () => ({ message: "HDR updated: 0" });`,
+ )
+ .replace(
+ "export function ServerComponent() {",
+ `export function ServerComponent({ loaderData }: { loaderData: { message: string } }) {`,
+ )
+ .replace(
+ "{/* elements */}",
+ `{/* elements */}\n{loaderData.message}
`,
+ ),
+ );
+ await page.waitForLoadState("networkidle");
+ let hdrStatus = page.locator("#index [data-hdr]");
+ await expect(hdrStatus).toHaveText("HDR updated: 0");
+ await expect(input).toHaveValue("stateful");
+ expect(page.errors).toEqual([]);
+
+ // route: HDR
+ await edit("app/routes/hmr/route.tsx", (contents) =>
+ contents.replace("HDR updated: 0", "HDR updated: 1"),
+ );
+ await page.waitForLoadState("networkidle");
+ await expect(hdrStatus).toHaveText("HDR updated: 1");
+ await expect(input).toHaveValue("stateful");
+ expect(page.errors).toEqual([]);
+
+ // route: HMR + HDR
+ await edit("app/routes/hmr/route.tsx", (contents) =>
+ contents
+ .replace("HMR updated: 1", "HMR updated: 2")
+ .replace("HDR updated: 1", "HDR updated: 2"),
+ );
+ await page.waitForLoadState("networkidle");
+ await expect(hmrStatus).toHaveText("HMR updated: 2");
+ await expect(hdrStatus).toHaveText("HDR updated: 2");
+ await expect(input).toHaveValue("stateful");
+ expect(page.errors).toEqual([]);
+
+ // create new non-route imported server component
+ await fs.writeFile(
+ path.join(cwd, "app/imported-server-component.tsx"),
+ `
+ import { ImportedServerComponentClientMounted } from "./imported-server-component-client";
+
+ export function ImportedServerComponent() {
+ return (
+
+
Imported Server Component HMR: 0
+
+
+ Imported Server Component Client Mounted: {mounted ? "yes" : "no"}
+
+ );
+ }
+ `,
+ "utf8",
+ );
+ await edit("app/routes/hmr/route.tsx", (contents) =>
+ contents
+ .replace(
+ "// imports",
+ `// imports\nimport { ImportedServerComponent } from "../../imported-server-component";`,
+ )
+ .replace(
+ "{/* elements */}",
+ "{/* elements */}\n",
+ ),
+ );
+ await page.waitForLoadState("networkidle");
+ let serverComponent = page.locator(
+ "#index [data-imported-server-component]",
+ );
+ let importedServerComponentClientMounted = page.locator(
+ "#index [data-imported-server-component-client-mounted]",
+ );
+ await expect(serverComponent).toBeVisible();
+ await expect(serverComponent).toHaveText(
+ "Imported Server Component HMR: 0",
+ );
+ await expect(importedServerComponentClientMounted).toBeVisible();
+ await expect(importedServerComponentClientMounted).toHaveText(
+ "Imported Server Component Client Mounted: yes",
+ );
+ await expect(input).toHaveValue("stateful");
+ expect(page.errors).toEqual([]);
+
+ // non-route imported server component: HMR
+ await edit("app/imported-server-component.tsx", (contents) =>
+ contents.replace(
+ "Imported Server Component HMR: 0",
+ "Imported Server Component HMR: 1",
+ ),
+ );
+ await page.waitForLoadState("networkidle");
+ await expect(serverComponent).toHaveText(
+ "Imported Server Component HMR: 1",
+ );
+ await expect(input).toHaveValue("stateful");
+ expect(page.errors).toEqual([]);
+
+ // create new non-route imported client component
+ await fs.writeFile(
+ path.join(cwd, "app/imported-client-component.tsx"),
+ `
+ "use client";
+
+ import { useState } from "react";
+
+ export function ImportedClientComponent() {
+ const [count, setCount] = useState(0);
+ return (
+
+
Imported Client Component HMR: 0
+
+