fix max readers during SSR

Author: tannerlinsley

src/components/builder/BuilderPage.client.tsx

@@ -0,0 +1,10 @@
+import { BuilderLayout } from './BuilderLayout'
+import { BuilderProvider } from './BuilderProvider'
+
+export function BuilderPage() {
+  return (
+    <BuilderProvider>
+      <BuilderLayout />
+    </BuilderProvider>
+  )
+}

src/components/builder/ExplorerPanel.tsx

@@ -6,8 +6,9 @@
  * Includes "Addons" tab for viewing per-feature file artifacts.
  */
 
+import * as React from 'react'
 import { useState, useMemo, useEffect, useCallback } from 'react'
-import { useNavigate, useSearch } from '@tanstack/react-router'
+import { ClientOnly, useNavigate, useSearch } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import { createHighlighter, type HighlighterGeneric } from 'shiki'
 import { Code, Play } from 'lucide-react'
@@ -19,9 +20,14 @@ import {
   useBuilderStore,
 } from './store'
 import { partners } from '~/utils/partners'
-import { PreviewPanel } from './webcontainer'
 import type { FeatureId, AttributedCompileOutput } from '~/builder/api'
 
+const LazyPreviewPanel = React.lazy(() =>
+  import('~/components/builder/webcontainer/PreviewPanel').then((m) => ({
+    default: m.PreviewPanel,
+  })),
+)
+
 // Lazy highlighter singleton for syntax highlighting
 let highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null
 
@@ -827,7 +833,11 @@ export function ExplorerPanel() {
         {viewMode === 'preview' ? (
           /* Full-width preview */
           <div className="flex-1 min-w-0 h-full">
-            <PreviewPanel files={compiledOutput?.files || null} />
+            <ClientOnly>
+              <React.Suspense fallback={null}>
+                <LazyPreviewPanel files={compiledOutput?.files || null} />
+              </React.Suspense>
+            </ClientOnly>
           </div>
         ) : (
           <>

src/components/builder/webcontainer/index.ts

@@ -1,12 +1,2 @@
 export { PreviewPanel } from './PreviewPanel'
 export { PreviewLoading } from './PreviewLoading'
-export {
-  useWebContainerStore,
-  useSetupStep,
-  usePreviewUrl,
-  useWebContainerError,
-  useTerminalOutput,
-  useIsUpdating,
-  type SetupStep,
-  SETUP_STEP_LABELS,
-} from './useWebContainerStore'

src/routes/builder.index.tsx

@@ -1,7 +1,13 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
+import * as React from 'react'
+import { ClientOnly, createFileRoute, Link } from '@tanstack/react-router'
 import { z } from 'zod'
 import { seo } from '~/utils/seo'
-import { BuilderProvider, BuilderLayout } from '~/components/builder'
+
+const LazyBuilderPage = React.lazy(() =>
+  import('~/components/builder/BuilderPage.client').then((m) => ({
+    default: m.BuilderPage,
+  })),
+)
 
 // Search params schema for shareable URLs
 const builderSearchSchema = z
@@ -44,9 +50,11 @@ export const Route = createFileRoute('/builder/')({
 function RouteComponent() {
   return (
     <div className="h-[calc(100dvh-var(--navbar-height))] w-full overflow-hidden">
-      <BuilderProvider>
-        <BuilderLayout />
-      </BuilderProvider>
+      <ClientOnly>
+        <React.Suspense fallback={null}>
+          <LazyBuilderPage />
+        </React.Suspense>
+      </ClientOnly>
     </div>
   )
 }

vite.config.ts

@@ -39,6 +39,7 @@ export default defineConfig({
       'file-selector',
       'normalize-wheel',
       '@tanstack/react-hotkeys',
+      '@webcontainer/api',
     ],
   },
   optimizeDeps: {