Do not use clientLoaders, because they bring more complexity with hyd…

…ration issues
TanStack · Jan 21, 2024 · 1c26d32 · 1c26d32
1 parent 8872190
commit 1c26d32
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 65 deletions.
diff --git a/app/routes/router.v1.docs.tsx b/app/routes/router.v1.docs.tsx
@@ -1,10 +1,5 @@
 import { FaDiscord, FaGithub } from 'react-icons/fa'
-import {
-  type ClientLoaderFunctionArgs,
-  Link,
-  json,
-  useLoaderData,
-} from '@remix-run/react'
+import { Link, json, useLoaderData } from '@remix-run/react'
 import type { LoaderFunction, MetaFunction } from '@remix-run/node'
 import { gradientText, repo, v1branch } from '~/projects/router'
 import { seo } from '~/utils/seo'
@@ -63,22 +58,14 @@ export const meta: MetaFunction = () => {
   })
 }
 
-export const clientLoader = async ({
-  serverLoader,
-}: ClientLoaderFunctionArgs) => {
-  const { tanstackDocsConfig } = await serverLoader<typeof loader>()
+export default function DocsRoute() {
+  const { tanstackDocsConfig } = useLoaderData<typeof loader>()
 
   const config = {
     ...tanstackDocsConfig,
     menu: [localMenu, ...tanstackDocsConfig.menu],
   }
 
-  return config
-}
-
-export default function DocsRoute() {
-  const config = useLoaderData<typeof clientLoader>()
-
   return (
     <Docs
       {...{

diff --git a/app/routes/table.v8.docs.tsx b/app/routes/table.v8.docs.tsx
@@ -1,5 +1,5 @@
+import { useMemo } from 'react'
 import { FaDiscord, FaGithub } from 'react-icons/fa'
-import type { ClientLoaderFunctionArgs } from '@remix-run/react'
 import { Link, json, useLoaderData } from '@remix-run/react'
 import { gradientText, repo, v8branch } from '~/projects/table'
 import { seo } from '~/utils/seo'
@@ -8,26 +8,6 @@ import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
 import type { MetaFunction } from '@remix-run/node'
 import { getTanstackDocsConfig } from '~/utils/config'
 
-export const loader = async () => {
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, v8branch)
-
-  return json({
-    tanstackDocsConfig,
-  })
-}
-
-const logo = (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to=".." className={`font-bold`}>
-      <span className={`${gradientText}`}>Table</span>{' '}
-      <span className="text-sm align-super">v8</span>
-    </Link>
-  </>
-)
-
 const localMenu = {
   label: 'Menu',
   children: [
@@ -54,6 +34,26 @@ const localMenu = {
   ],
 }
 
+export const loader = async () => {
+  const tanstackDocsConfig = await getTanstackDocsConfig(repo, v8branch)
+
+  return json({
+    tanstackDocsConfig,
+  })
+}
+
+const logo = (
+  <>
+    <Link to="/" className="font-light">
+      TanStack
+    </Link>
+    <Link to=".." className={`font-bold`}>
+      <span className={`${gradientText}`}>Table</span>{' '}
+      <span className="text-sm align-super">v8</span>
+    </Link>
+  </>
+)
+
 export const meta: MetaFunction = () => {
   return seo({
     title:
@@ -63,23 +63,18 @@ export const meta: MetaFunction = () => {
   })
 }
 
-export const clientLoader = async ({
-  serverLoader,
-}: ClientLoaderFunctionArgs) => {
-  const { tanstackDocsConfig } = await serverLoader<typeof loader>()
-
-  const config = {
-    ...tanstackDocsConfig,
-    menu: [localMenu, ...tanstackDocsConfig.menu],
-  }
-
-  return config
-}
-
 export const ErrorBoundary = DefaultErrorBoundary
 
 export default function RouteReactTable() {
-  const config = useLoaderData<typeof clientLoader>()
+  const { tanstackDocsConfig } = useLoaderData<typeof loader>()
+
+  const config = useMemo(
+    () => ({
+      ...tanstackDocsConfig,
+      menu: [localMenu, ...tanstackDocsConfig.menu],
+    }),
+    [tanstackDocsConfig]
+  )
 
   return (
     <Docs

diff --git a/app/routes/table.v8.tsx b/app/routes/table.v8.tsx
@@ -1,5 +1,19 @@
 import { Link, Outlet, useLocation, useSearchParams } from '@remix-run/react'
+import { json } from '@remix-run/node'
 import { DefaultErrorBoundary } from '~/components/DefaultErrorBoundary'
+import { v8branch } from '~/projects/table'
+import { getTanstackDocsConfig } from '~/utils/config'
+
+export const loader = async () => {
+  const repo = 'tanstack/table'
+  const tanstackDocsConfig = await getTanstackDocsConfig(repo, v8branch)
+
+  return json({
+    tanstackDocsConfig,
+  })
+}
+
+export type TableConfigLoaderData = typeof loader
 
 export const ErrorBoundary = DefaultErrorBoundary
 

diff --git a/app/routes/virtual.v3.docs.tsx b/app/routes/virtual.v3.docs.tsx
@@ -3,8 +3,9 @@ import { Link, json, useLoaderData } from '@remix-run/react'
 import { gradientText, repo, v3branch } from '~/projects/virtual'
 import { seo } from '~/utils/seo'
 import { Docs } from '~/components/Docs'
-import type { ClientLoaderFunctionArgs, MetaFunction } from '@remix-run/react'
+import type { MetaFunction } from '@remix-run/react'
 import { getTanstackDocsConfig } from '~/utils/config'
+import { useMemo } from 'react'
 
 export const loader = async () => {
   const tanstackDocsConfig = await getTanstackDocsConfig(repo, v3branch)
@@ -62,21 +63,17 @@ export const meta: MetaFunction = () => {
       'Headless UI for virtualizing long scrollable lists with TS/JS, React, Solid, Svelte and Vue',
   })
 }
-export const clientLoader = async ({
-  serverLoader,
-}: ClientLoaderFunctionArgs) => {
-  const { tanstackDocsConfig } = await serverLoader<typeof loader>()
-
-  const config = {
-    ...tanstackDocsConfig,
-    menu: [localMenu, ...tanstackDocsConfig.menu],
-  }
-
-  return config
-}
 
 export default function RouteVirtual() {
-  const config = useLoaderData<typeof clientLoader>()
+  const { tanstackDocsConfig } = useLoaderData<typeof loader>()
+
+  const config = useMemo(
+    () => ({
+      ...tanstackDocsConfig,
+      menu: [localMenu, ...tanstackDocsConfig.menu],
+    }),
+    [tanstackDocsConfig]
+  )
 
   return (
     <Docs