Dev

app/entry.client.tsx

@@ -8,10 +8,10 @@ import { HydratedRouter } from "react-router/dom";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
-const { NODE_ENV, MOCKS } = process.env;
+const { MOCKS } = process.env;
 
 async function prepareApp() {
-  if (NODE_ENV === "development" && MOCKS === "true") {
+  if (MOCKS === "true") {
     const { worker } = await import("./mocks/browser");
     return worker.start();
   }

app/routes/index.tsx

@@ -1,7 +1,7 @@
 import type { Route } from "./+types/index";
-import { getGamesToday } from "~/utils/games";
+import { getGamesToday, type TodaysGames } from "~/utils/games";
 import React from "react";
-import { Await } from "react-router";
+import { Await, data } from "react-router";
 import SkeletonTodaysGames from "~/components/ui/loading/skeleton-todays-games";
 import LatestGames from "~/components/latestGames";
 
@@ -15,15 +15,41 @@ export function meta() {
 export async function loader() {
   const gamesData = getGamesToday();
 
+  return data(
+    { gamesData },
+    {
+      headers: {
+        "Cache-Control": "max-age=3600, public",
+      },
+    }
+  );
+}
+
+clientLoader.hydrate = true;
+
+let cache: { gamesData: TodaysGames };
+
+export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
+  if (cache) return { gamesData: cache.gamesData };
+
+  const { gamesData } = (await serverLoader()) as unknown as {
+    gamesData: TodaysGames;
+  };
+  cache = { gamesData };
+
   return { gamesData };
 }
 
+export function HydrateFallback() {
+  return <div>Loading...</div>;
+}
+
 export default function Index({
   loaderData: { gamesData },
 }: Route.ComponentProps) {
   return (
     <React.Suspense fallback={<SkeletonTodaysGames />}>
-      <Await resolve={gamesData}>
+      <Await resolve={gamesData as unknown as Promise<{ data: TodaysGames }>}>
         {(gamesData) => <LatestGames data={gamesData.data} />}
       </Await>
     </React.Suspense>