fix vite preview streaming

.changeset/thick-lines-follow.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/start-plugin-core': patch
+---
+
+fix: streaming in vite preview

e2e/react-start/streaming-ssr/package.json

@@ -8,7 +8,9 @@
     "dev:e2e": "vite dev",
     "build": "vite build && tsc --noEmit",
     "start": "pnpx srvx --prod -s ../client dist/server/server.js",
-    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+    "preview": "vite preview",
+    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium",
+    "test:e2e:preview": "rm -rf port*.txt; MODE=preview playwright test preview-streaming.spec.ts --project=chromium"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.80.7",

e2e/react-start/streaming-ssr/playwright.config.ts

@@ -2,9 +2,16 @@ import { defineConfig, devices } from '@playwright/test'
 import { getTestServerPort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
-const PORT = await getTestServerPort(packageJson.name)
+const isPreview = process.env.MODE === 'preview'
+
+const PORT = await getTestServerPort(
+  `${packageJson.name}${isPreview ? '_preview' : ''}`,
+)
 const baseURL = `http://localhost:${PORT}`
 
+const ssrCommand = `VITE_SERVER_PORT=${PORT} pnpm build && PORT=${PORT} VITE_SERVER_PORT=${PORT} pnpm start`
+const previewCommand = `VITE_SERVER_PORT=${PORT} pnpm build && pnpm preview --port ${PORT}`
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -20,7 +27,7 @@ export default defineConfig({
   },
 
   webServer: {
-    command: `VITE_SERVER_PORT=${PORT} pnpm build && PORT=${PORT} VITE_SERVER_PORT=${PORT} pnpm start`,
+    command: isPreview ? previewCommand : ssrCommand,
     url: baseURL,
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',

e2e/react-start/streaming-ssr/tests/preview-streaming.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from './fixtures'
+
+test('vite preview streams HTML incrementally', async ({ page }) => {
+  // /deferred has immediate data + deferred data with a ~1s delay.
+  // Without streaming, compression buffers the entire response.
+  await page.goto('/deferred', { waitUntil: 'commit' })
+
+  // Immediate data should arrive in the first chunk
+  await expect(page.getByTestId('immediate-data')).toBeVisible({
+    timeout: 3000,
+  })
+
+  // Deferred data (1s delay) should still be loading at this point
+  await expect(page.getByTestId('deferred-loading')).toBeVisible()
+
+  // Wait for it to resolve
+  await expect(page.getByTestId('deferred-data')).toContainText(
+    'Deferred data loaded!',
+    { timeout: 5000 },
+  )
+})

nx.json

@@ -55,6 +55,11 @@
       "dependsOn": ["^build"],
       "inputs": ["default", "^production"]
     },
+    "test:e2e:preview": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["default", "^production"]
+    },
     "test:types": {
       "cache": true,
       "dependsOn": ["^build"],

packages/start-plugin-core/src/preview-server-plugin/plugin.ts

@@ -50,6 +50,10 @@ export function previewServerPlugin(): Plugin {
               const webReq = new NodeRequest({ req, res })
               const webRes: Response = await serverBuild.fetch(webReq)
 
+              if (webRes.headers.get('content-type')?.startsWith('text/html')) {
+                res.setHeader('content-encoding', 'identity')
+              }
+
               // Temporary workaround
               // Vite preview's compression middleware doesn't support flattened array headers that srvx sets
               // Call writeHead() before srvx to avoid corruption