server-components

1// Low-level Flight stream APIs.2// Prefer high-level helpers unless you need a custom transport.3 4import { createAPIFileRoute } from '@tanstack/react-start/api'5import { createServerFn } from '@tanstack/react-start'6import {7  createFromFetch,8  renderToReadableStream,9} from '@tanstack/react-start/rsc'10import { useSuspenseQuery } from '@tanstack/react-query'11 12const getFlightStream = createServerFn({ method: 'GET' }).handler(async () => {13  return renderToReadableStream(<div>Server rendered content</div>)14})15 16export const APIRoute = createAPIFileRoute('/api/rsc')({17  GET: async () => {18    const stream = await getFlightStream()19 20    return new Response(stream, {21      headers: {22        'Content-Type': 'text/x-component',23      },24    })25  },26})27 28const rscQueryOptions = () => ({29  queryKey: ['api-rsc'],30  structuralSharing: false,31  queryFn: async () => {32    const Renderable = await createFromFetch(fetch('/api/rsc'))33    return { Renderable }34  },35})36 37export function ApiBackedRscWidget() {38  const { data } = useSuspenseQuery(rscQueryOptions())39  return <>{data.Renderable}</>40}41