fix: statically load library landing pages

Move library landing pages to per-library route modules so the matched page ships with the initial route payload. This avoids the hard-refresh hydration flash without bundling every landing page together.

Author: tannerlinsley

src/components/DocsLayout.tsx

@@ -521,6 +521,7 @@ const useMenuConfig = ({
 }
 
 type DocsLayoutProps = {
+  libraryId: LibraryId
   name: string
   version: string
   colorFrom: string
@@ -535,6 +536,7 @@ type DocsLayoutProps = {
 }
 
 export function DocsLayout({
+  libraryId,
   colorFrom,
   colorTo,
   textColor,
@@ -544,9 +546,9 @@ export function DocsLayout({
   children,
   isLandingPage = false,
 }: DocsLayoutProps) {
-  const { libraryId, version } = useParams({
+  const { version } = useParams({
     strict: false,
-  }) as { libraryId: LibraryId; version: string }
+  }) as { version: string }
   const { _splat } = useParams({ strict: false })
   const menuConfig = useMenuConfig({ config, frameworks, repo, libraryId })
 

src/routeTree.gen.ts

@@ -52,6 +52,7 @@ function DocsRoute() {
 
   return (
     <DocsLayout
+      libraryId={libraryId}
       name={library.name.replace('TanStack ', '')}
       version={version === 'latest' ? library.latestVersion : version!}
       colorFrom={library.accentColorFrom ?? library.colorFrom}

src/routes/$libraryId/$version.docs.tsx

@@ -6,11 +6,9 @@ import {
 } from '@tanstack/react-router'
 import { DocsLayout } from '~/components/DocsLayout'
 import { findLibrary } from '~/libraries'
-import type { LibraryId } from '~/libraries'
 import { seo } from '~/utils/seo'
 
 import { Button } from '~/ui'
-import { landingComponents } from './$version'
 
 const versionRouteApi = getRouteApi('/$libraryId/$version')
 
@@ -38,7 +36,7 @@ export const Route = createFileRoute('/$libraryId/$version/')({
 function LibraryVersionIndex() {
   const { libraryId, version } = Route.useParams()
   const library = findLibrary(libraryId)
-  const { config, landingCodeExampleRsc } = versionRouteApi.useLoaderData()
+  const { config } = versionRouteApi.useLoaderData()
 
   if (!library) {
     throw notFound()
@@ -48,10 +46,9 @@ function LibraryVersionIndex() {
     throw notFound()
   }
 
-  const LandingComponent = landingComponents[libraryId as LibraryId]
-
   return (
     <DocsLayout
+      libraryId={libraryId}
       name={library.name.replace('TanStack ', '')}
       version={version === 'latest' ? library.latestVersion : version!}
       colorFrom={library.accentColorFrom ?? library.colorFrom}
@@ -63,23 +60,19 @@ function LibraryVersionIndex() {
       repo={library.repo}
       isLandingPage
     >
-      {LandingComponent ? (
-        <LandingComponent landingCodeExampleRsc={landingCodeExampleRsc} />
-      ) : (
-        <div className="px-4 pt-32 pb-24">
-          <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4 max-w-3xl mx-auto text-center">
-            <h1 className="text-2xl font-bold">{library.name}</h1>
-            <p className="text-gray-600">{library.description}</p>
-            <Button
-              as={Link}
-              to="/$libraryId/$version/docs"
-              params={{ libraryId, version } as never}
-            >
-              View Documentation
-            </Button>
-          </div>
+      <div className="px-4 pt-32 pb-24">
+        <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4 max-w-3xl mx-auto text-center">
+          <h1 className="text-2xl font-bold">{library.name}</h1>
+          <p className="text-gray-600">{library.description}</p>
+          <Button
+            as={Link}
+            to="/$libraryId/$version/docs"
+            params={{ libraryId, version } as never}
+          >
+            View Documentation
+          </Button>
         </div>
-      )}
+      </div>
     </DocsLayout>
   )
 }

src/routes/$libraryId/$version.index.tsx

@@ -3,76 +3,24 @@ import {
   redirect,
   notFound,
   createFileRoute,
-  lazyRouteComponent,
 } from '@tanstack/react-router'
-import type { AsyncRouteComponent } from '@tanstack/react-router'
-import type { ReactNode } from 'react'
 import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
-import { findLibrary, getBranch } from '~/libraries'
-import type { LibraryId } from '~/libraries'
-import { getTanstackDocsConfig } from '~/utils/config'
-import { fetchLandingCodeExample } from '~/utils/landing-code-example.functions'
+import { findLibrary } from '~/libraries'
+import { loadLibraryConfig, validateLibraryVersion } from '../-library-landing'
 
-export type LandingComponentProps = {
-  landingCodeExampleRsc?: ReactNode
-}
-
-export const landingComponents: Partial<
-  Record<LibraryId, AsyncRouteComponent<LandingComponentProps>>
-> = {
-  query: lazyRouteComponent(() => import('~/components/landing/QueryLanding')),
-  router: lazyRouteComponent(
-    () => import('~/components/landing/RouterLanding'),
-  ),
-  table: lazyRouteComponent(() => import('~/components/landing/TableLanding')),
-  form: lazyRouteComponent(() => import('~/components/landing/FormLanding')),
-  start: lazyRouteComponent(() => import('~/components/landing/StartLanding')),
-  store: lazyRouteComponent(() => import('~/components/landing/StoreLanding')),
-  virtual: lazyRouteComponent(
-    () => import('~/components/landing/VirtualLanding'),
-  ),
-  ranger: lazyRouteComponent(
-    () => import('~/components/landing/RangerLanding'),
-  ),
-  pacer: lazyRouteComponent(() => import('~/components/landing/PacerLanding')),
-  hotkeys: lazyRouteComponent(
-    () => import('~/components/landing/HotkeysLanding'),
-  ),
-  config: lazyRouteComponent(
-    () => import('~/components/landing/ConfigLanding'),
-  ),
-  db: lazyRouteComponent(() => import('~/components/landing/DbLanding')),
-  ai: lazyRouteComponent(() => import('~/components/landing/AiLanding')),
-  devtools: lazyRouteComponent(
-    () => import('~/components/landing/DevtoolsLanding'),
-  ),
-  cli: lazyRouteComponent(() => import('~/components/landing/CliLanding')),
-  intent: lazyRouteComponent(
-    () => import('~/components/landing/IntentLanding'),
-  ),
-}
+export type { LandingComponentProps } from '../-library-landing'
 
 export const Route = createFileRoute('/$libraryId/$version')({
   staleTime: 1000 * 60 * 5,
   beforeLoad: async (ctx) => {
     const { libraryId, version } = ctx.params
-    const library = findLibrary(libraryId)
-
-    if (!library) {
-      throw notFound()
-    }
-
-    library.handleRedirects?.(ctx.location.href)
-
-    if (!library.availableVersions.concat('latest').includes(version!)) {
+    const library = validateLibraryVersion(libraryId, version, () => {
       throw redirect({
         params: { libraryId, version: 'latest' } as never,
       })
-    }
+    })
 
-    if (!ctx.location.pathname.includes('/docs')) {
-      await landingComponents[libraryId as LibraryId]?.preload?.()
-    }
+    library.handleRedirects?.(ctx.location.href)
   },
   loader: async (ctx) => {
     const { libraryId, version } = ctx.params
@@ -82,26 +30,8 @@ export const Route = createFileRoute('/$libraryId/$version')({
       throw notFound()
     }
 
-    const branch = getBranch(library, version)
-    const config = await getTanstackDocsConfig({
-      data: {
-        repo: library.repo,
-        branch,
-        docsRoot: library.docsRoot || 'docs',
-      },
-    })
-
-    const landingCodeExample = ctx.location.pathname.includes('/docs')
-      ? null
-      : await fetchLandingCodeExample({
-          data: {
-            libraryId,
-          },
-        })
-
     return {
-      config,
-      landingCodeExampleRsc: landingCodeExample?.contentRsc ?? null,
+      config: await loadLibraryConfig(library.id, version!),
     }
   },
   component: RouteForm,