perf(prefetch): seed the file list on the pages that render it, not every route

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/chat/[chatId]/page.tsx

@@ -1,8 +1,11 @@
 import { Suspense } from 'react'
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import type { Metadata } from 'next'
 import { getSession } from '@/lib/auth'
+import { getQueryClient } from '@/app/_shell/providers/get-query-client'
 import { Home } from '@/app/workspace/[workspaceId]/home/home'
 import { HomeFallback } from '@/app/workspace/[workspaceId]/home/home-fallback'
+import { prefetchHomeSurface } from '@/app/workspace/[workspaceId]/home/prefetch'
 import { resolveTableViewsEnabled } from '@/app/workspace/[workspaceId]/home/resolve-table-views-flag'
 
 export const metadata: Metadata = {
@@ -19,16 +22,22 @@ interface ChatPageProps {
 export default async function ChatPage({ params }: ChatPageProps) {
   const [{ workspaceId, chatId }, session] = await Promise.all([params, getSession()])
   const userId = session?.user?.id
-  const tableViewsEnabled = await resolveTableViewsEnabled(workspaceId, userId)
+  const queryClient = getQueryClient()
+  const [tableViewsEnabled] = await Promise.all([
+    resolveTableViewsEnabled(workspaceId, userId),
+    prefetchHomeSurface(queryClient, workspaceId, userId),
+  ])
   return (
-    <Suspense fallback={<HomeFallback />}>
-      <Home
-        key={chatId}
-        chatId={chatId}
-        userName={session?.user?.name}
-        userId={userId}
-        tableViewsEnabled={tableViewsEnabled}
-      />
-    </Suspense>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Suspense fallback={<HomeFallback />}>
+        <Home
+          key={chatId}
+          chatId={chatId}
+          userName={session?.user?.name}
+          userId={userId}
+          tableViewsEnabled={tableViewsEnabled}
+        />
+      </Suspense>
+    </HydrationBoundary>
   )
 }

apps/sim/app/workspace/[workspaceId]/files/prefetch.ts

@@ -3,6 +3,7 @@ import { listWorkspaceFileFoldersContract } from '@/lib/api/contracts/workspace-
 import { listWorkspaceFileFolders } from '@/lib/uploads/contexts/workspace/workspace-file-folder-manager'
 import { getWorkspaceHostContextForViewer } from '@/lib/workspaces/host-context'
 import { prefetchResourceListChrome } from '@/app/workspace/[workspaceId]/lib/prefetch-resource-list-chrome'
+import { seedWorkspaceFiles } from '@/app/workspace/[workspaceId]/lib/seed-workspace-files'
 import {
   WORKSPACE_FILE_FOLDERS_STALE_TIME,
   workspaceFileFolderKeys,
@@ -15,10 +16,8 @@ import {
  * the Owner column — under the same query keys their client hooks (`useWorkspaceFileFolders`) use
  * (scope `active`), so the browser paints populated on first render.
  *
- * The FILE LIST itself is not here: the workspace layout seeds it, because only the first boundary
- * to touch a key can reach the server render — `HydrationBoundary` defers an already-registered
- * query to a `useEffect` SSR never runs, and the sidebar registers this key on every route even
- * with its own fetch disabled.
+ * The file list is seeded here rather than in the layout so only the routes that render it pay for
+ * it. See {@link seedWorkspaceFiles} for why a large workspace seeds nothing at all.
  *
  * Folders and the chrome reads all go through the data layer, shaped to their route contracts so a
  * hydrated entry matches a client fetch.
@@ -54,5 +53,6 @@ export async function prefetchFilesBrowser(
       staleTime: WORKSPACE_FILE_FOLDERS_STALE_TIME,
     }),
     prefetchResourceListChrome(queryClient, workspaceId, 'file', userId),
+    seedWorkspaceFiles(queryClient, workspaceId),
   ])
 }

apps/sim/app/workspace/[workspaceId]/home/page.tsx

@@ -1,8 +1,11 @@
 import { Suspense } from 'react'
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import type { Metadata } from 'next'
 import { redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { isChatEnabled } from '@/lib/core/config/env-flags'
+import { getQueryClient } from '@/app/_shell/providers/get-query-client'
+import { prefetchHomeSurface } from '@/app/workspace/[workspaceId]/home/prefetch'
 import { resolveTableViewsEnabled } from '@/app/workspace/[workspaceId]/home/resolve-table-views-flag'
 import { Home } from './home'
 import { HomeFallback } from './home-fallback'
@@ -20,19 +23,23 @@ export default async function HomePage({ params }: { params: Promise<{ workspace
     redirect(`/workspace/${workspaceId}`)
   }
 
-  /**
-   * Home prefetches nothing of its own. Both lists it reads — workflow folders and
-   * the workspace file list — are hydrated by `prefetchWorkspaceSidebar` in the
-   * layout under the same keys, and re-reading them here would cost a second query
-   * per request without reaching the server render.
-   */
   const session = await getSession()
   const userId = session?.user?.id
-  const tableViewsEnabled = await resolveTableViewsEnabled(workspaceId, userId)
+  const queryClient = getQueryClient()
+  const [tableViewsEnabled] = await Promise.all([
+    resolveTableViewsEnabled(workspaceId, userId),
+    prefetchHomeSurface(queryClient, workspaceId, userId),
+  ])
 
   return (
-    <Suspense fallback={<HomeFallback />}>
-      <Home userName={session?.user?.name} userId={userId} tableViewsEnabled={tableViewsEnabled} />
-    </Suspense>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Suspense fallback={<HomeFallback />}>
+        <Home
+          userName={session?.user?.name}
+          userId={userId}
+          tableViewsEnabled={tableViewsEnabled}
+        />
+      </Suspense>
+    </HydrationBoundary>
   )
 }

apps/sim/app/workspace/[workspaceId]/home/prefetch.ts

@@ -0,0 +1,27 @@
+import type { QueryClient } from '@tanstack/react-query'
+import { getWorkspaceHostContextForViewer } from '@/lib/workspaces/host-context'
+import { seedWorkspaceFiles } from '@/app/workspace/[workspaceId]/lib/seed-workspace-files'
+
+/**
+ * Prefetches what the Home surface needs on top of the workspace layout's own prefetch.
+ *
+ * Home reads the workspace file list on mount (resource tabs, mentions, the resource picker), so
+ * the list is seeded by the routes that render Home rather than by the layout: seeding it in the
+ * layout would pay for it on every workspace route, including the ones that never read it.
+ *
+ * The seed carries no authorization of its own, so the viewer is proved first. This reuses the
+ * layout's `cache`d host-context lookup rather than re-deriving the permission, so it costs no
+ * additional queries; a viewer without access caches nothing and the client fetch reaches the
+ * route for the real 403.
+ */
+export async function prefetchHomeSurface(
+  queryClient: QueryClient,
+  workspaceId: string,
+  userId: string | undefined
+): Promise<void> {
+  if (!userId) return
+  const hostContext = await getWorkspaceHostContextForViewer(workspaceId, userId)
+  if (!hostContext) return
+
+  await seedWorkspaceFiles(queryClient, workspaceId)
+}

apps/sim/app/workspace/[workspaceId]/lib/prefetch.test.ts

@@ -354,18 +354,18 @@ describe('workspace list prefetches', () => {
     })
 
     /**
-     * The FILE LIST is deliberately not primed here — `prefetchWorkspaceSidebar` owns it. The
-     * sidebar registers that query on every workspace route (a disabled query still registers), and
-     * `HydrationBoundary` hands an already-registered query to a `useEffect` SSR never runs, so a
-     * page-level seed costs a read per render and still cannot reach the server render.
+     * The file list is the browser's primary content, so it must be seeded by the page that
+     * renders it — the layout no longer seeds it, which would have charged every workspace
+     * route for a list only a few of them read.
      */
-    it('leaves the file list to the layout rather than re-reading it per page', async () => {
+    it('seeds the file list the browser renders', async () => {
+      const files = [{ id: 'file-1' }]
+      mockListWorkspaceFilesWithShares.mockResolvedValue(files)
       const client = makeClient()
 
       await prefetchFilesBrowser(client, WORKSPACE_ID, USER_ID)
 
-      expect(mockListWorkspaceFilesWithShares).not.toHaveBeenCalled()
-      expect(client.getQueryData(workspaceFilesKeys.list(WORKSPACE_ID, 'active'))).toBeUndefined()
+      expect(client.getQueryData(workspaceFilesKeys.list(WORKSPACE_ID, 'active'))).toEqual(files)
     })
 
     /**
@@ -510,27 +510,15 @@ describe('workspace list prefetches', () => {
     })
 
     /**
-     * The layout is the only boundary that can reach the server render for this key, so it is the
-     * one that seeds it — see the note on the entry itself.
+     * The file list belongs to the pages that render it, not to every workspace route. A sidebar
+     * seed would charge the workflow editor, logs, and settings for a read none of them make.
      */
-    it('seeds the workspace file list', async () => {
-      const files = [{ id: 'file-1', name: 'a.txt' }]
-      mockListWorkspaceFilesWithShares.mockResolvedValue(files)
+    it('does not read the workspace file list', async () => {
       const client = makeClient()
 
       await prefetchWorkspaceSidebar(client, WORKSPACE_ID, USER_ID, HOST_CONTEXT, null)
 
-      expect(client.getQueryData(workspaceFilesKeys.list(WORKSPACE_ID, 'active'))).toEqual(files)
-    })
-
-    /** A failed file read is an optimization loss, not a render failure. */
-    it('does not throw when the file read rejects, and seeds no files', async () => {
-      mockListWorkspaceFilesWithShares.mockRejectedValue(new Error('500'))
-      const client = makeClient()
-
-      await expect(
-        prefetchWorkspaceSidebar(client, WORKSPACE_ID, USER_ID, HOST_CONTEXT, null)
-      ).resolves.toBeUndefined()
+      expect(mockListWorkspaceFilesWithShares).not.toHaveBeenCalled()
       expect(client.getQueryData(workspaceFilesKeys.list(WORKSPACE_ID, 'active'))).toBeUndefined()
     })
 
@@ -566,9 +554,9 @@ describe('workspace list prefetches', () => {
       ],
       [
         /**
-         * Asserted against the folder key, not the file list: `prefetchFilesBrowser`
-         * deliberately never seeds `workspaceFilesKeys` (the layout owns it), so an
-         * assertion on that key would hold no matter what this function did.
+         * Asserted against the folder key: the file list is seeded rather than prefetched, so
+         * a rejecting read leaves that key empty by design and could not distinguish a
+         * swallowed failure from a function that did nothing.
          */
         'prefetchFilesBrowser',
         (client: QueryClient) => prefetchFilesBrowser(client, WORKSPACE_ID, USER_ID),

apps/sim/app/workspace/[workspaceId]/prefetch.ts

@@ -10,7 +10,6 @@ import { getWorkspaceHostContextForViewer } from '@/lib/workspaces/host-context'
 import { listWorkspacesForViewer } from '@/lib/workspaces/list'
 import { getWorkspacePermissionsForAuthorizedViewer } from '@/lib/workspaces/permissions/utils'
 import { prefetchResourceFolders } from '@/app/workspace/[workspaceId]/lib/prefetch-resource-folders'
-import { seedWorkspaceFiles } from '@/app/workspace/[workspaceId]/lib/seed-workspace-files'
 import {
   MOTHERSHIP_CHAT_LIST_STALE_TIME,
   mapChat,
@@ -149,15 +148,6 @@ export async function prefetchWorkspaceSidebar(
         ]
       : []),
     prefetchResourceFolders(queryClient, workspaceId, 'workflow', userId),
-    /**
-     * Seeded from the layout, not from the pages that render the list. `enabled: false` stops the
-     * sidebar's query from FETCHING but not from registering: `useQuery` builds its observer
-     * unconditionally, and the observer's constructor calls `queryCache.build()`, which adds the
-     * key. `HydrationBoundary` then defers an already-registered query to a `useEffect` SSR never
-     * runs — so only the first boundary to touch the key can reach the server render, and that is
-     * this one.
-     */
-    seedWorkspaceFiles(queryClient, workspaceId),
     queryClient.prefetchQuery({
       queryKey: workspaceKeys.permissions(workspaceId),
       queryFn: () =>