How ReactRouter stringify/parse data internally from server to client

[lhapaipai]

Hi every one and thank you for this amazing framework !!

To explain my question I provide a minimal example where I load data from two different sources

• from a loader
• from a Resource Route

// app/routes.ts
import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  route("api", "routes/api.ts"),
] satisfies RouteConfig;

My principal route /

// app/routes/home.tsx
import { useEffect } from "react";
import type { Route } from "./+types/home";
import { href } from "react-router";

export function loader() {
  return {
    dateFromLoader: new Date(),
  };
}

export default function Home({ loaderData }: Route.ComponentProps) {
  useEffect(() => {
    fetch(href("/api"))
      .then((res) => res.json())
      .then((fetchData) => {
        console.log(loaderData, fetchData);
      });
  });
  return <div>Home</div>;
}

my route /api

// app/routes/api.ts
export function loader() {
  return Response.json({
    dateFromResourceRoute: new Date(),
  });
}

I discover that as expected the date from the resource route appears stringified but with the loader, React Router has parsed the date and it appears as a Date instance. This is magic !

I didn't find any mention of that in the doc. and I wonder if these methods are exported from the source code to be used for my own logic ?

[sergiodxa]

It uses turbo-stream package from Jacob Ebey

https://github.com/jacob-ebey/turbo-stream

[lhapaipai]

Thank you @sergiodxa !