How to conditionally return a resource based on a query parameter?

[jcarrano]

According to the documentation, a resource route must not define a default export, and then raw data can be returned from the loader. Say I want to have /docs/document, which returns a HTML built from components and /docs/document?text which returns a downloadable text representation. Is that possible?

[sergiodxa]

You could return an HTML response or a plain text response

export async function loader({ request }: Route.LoaderArgs) {
  let data = await getData(request)
  let url = new URL(request.url)
  if (url.searchParams.has("text")) return plain(formatToPlainText(data))
  return html(formatToHTML(data))
}

The plain and html functions can be wrappers of new Response that sets the correct Content-Type header.

function plain(data: string, init?: ResponseInit) {
  let headers = new Headers(init?.headers)
  headers.set("Content-Type", "text/plain")
  return new Response(data, { ...init, headers })
}

function plain(data: string, init?: ResponseInit) {
  let headers = new Headers(init?.headers)
  headers.set("Content-Type", "text/html") // the only difference
  return new Response(data, { ...init, headers })
}

Then the formatToPlainText and formatToHTML are up to you and may depend on your data. The formatToHTML could use React with ReactDOMServer.renderToString to generate the HTML.

Note that this HTML will not work as normal route in your app, like it won't load JS, but it will be plain HTML.

If you want it to perform like a normal route, instead of a search param create a separate route, like routes/docs.document.tsx is the one rendering HTML and routes/docs.document[.txt].ts is the one that returns plain text, then you do GET /docs/document or GET /docs/document.txt.

[jcarrano]

Ok, so it is either/or: either a normal route with all the benefits, or a loader-only route with rendered HTML and TXT resources.