server-components

1// Browser-owned loader pattern.2// Use when the loader itself needs browser APIs such as localStorage.3 4import { createFileRoute } from '@tanstack/react-router'5import { createServerFn } from '@tanstack/react-start'6import { renderServerComponent } from '@tanstack/react-start/rsc'7import { z } from 'zod'8 9const getDrawingTools = createServerFn({ method: 'POST' })10  .validator(z.object({ savedState: z.string().nullable() }))11  .handler(async ({ data }) => {12    const Tools = await renderServerComponent(13      <ToolPalette savedState={data.savedState} />,14    )15 16    return { Tools }17  })18 19export const Route = createFileRoute('/canvas')({20  ssr: false,21  loader: async () => {22    const savedState = localStorage.getItem('canvas-state')23    return getDrawingTools({ data: { savedState } })24  },25  component: CanvasPage,26})27 28function CanvasPage() {29  const { Tools } = Route.useLoaderData()30  return <>{Tools}</>31}32 33function ToolPalette(props: { savedState: string | null }) {34  return (35    <section>36      <h1>Canvas tools</h1>37      <pre>{props.savedState ?? 'no saved state'}</pre>38    </section>39  )40}41