Initial SSR support for stations

Author: bkeepers

package-lock.json

@@ -16,10 +16,10 @@
     "concurrently": "^9.2.1"
   },
   "dependencies": {
-    "@neaps/api": "https://pkg.pr.new/openwatersio/neaps/@neaps/api@249",
-    "@neaps/react": "https://pkg.pr.new/openwatersio/neaps/@neaps/react@249",
+    "@neaps/api": "https://pkg.pr.new/openwatersio/neaps/@neaps/api@2b4cce8",
+    "@neaps/react": "https://pkg.pr.new/openwatersio/neaps/@neaps/react@2b4cce8",
     "@neaps/tide-database": "^0.7.20260304",
-    "@neaps/tide-predictor": "https://pkg.pr.new/openwatersio/neaps/@neaps/tide-predictor@249",
-    "neaps": "https://pkg.pr.new/openwatersio/neaps@249"
+    "@neaps/tide-predictor": "https://pkg.pr.new/openwatersio/neaps/@neaps/tide-predictor@2b4cce8",
+    "neaps": "https://pkg.pr.new/openwatersio/neaps@2b4cce8"
   }
 }

package.json

@@ -27,7 +27,7 @@
     "clsx": "^2.1.1",
     "coordinate-format": "^1.0.0",
     "maplibre-gl": "^5.19.0",
-    "neaps": "https://pkg.pr.new/openwatersio/neaps@d84bf68",
+    "neaps": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-map-gl": "^8.1.0",

website/package.json

@@ -1,27 +1,38 @@
-import { useRef, useCallback } from "react";
+import { useRef, useCallback, useMemo } from "react";
 import {
   NeapsProvider,
   StationsMap,
   NearbyStations,
+  createQueryClient,
   type StationSummary,
 } from "@neaps/react";
+import { hydrate, type DehydratedState } from "@tanstack/react-query";
 import type { MapRef } from "react-map-gl/maplibre";
 import "@neaps/react/styles.css";
 import { API_HOST } from "../../utils/constants";
-import { preferredUnits } from "../../utils/units";
 import { useMapStyle } from "../../utils/useMapStyle";
 
 interface Props {
   stationId: string;
   latitude: number;
   longitude: number;
+  dehydratedState?: DehydratedState;
 }
 
 export function NearbyStationsIsland({
   stationId,
   latitude,
   longitude,
+  dehydratedState,
 }: Props) {
+  const queryClient = useMemo(() => {
+    const client = createQueryClient();
+    if (dehydratedState) {
+      hydrate(client, dehydratedState);
+    }
+    return client;
+  }, [dehydratedState]);
+
   const mapStyle = useMapStyle();
   const mapRef = useRef<MapRef>(null);
 
@@ -38,7 +49,7 @@ export function NearbyStationsIsland({
   }, [longitude, latitude]);
 
   return (
-    <NeapsProvider baseUrl={API_HOST} units={preferredUnits}>
+    <NeapsProvider baseUrl={API_HOST} queryClient={queryClient}>
       <div className="flex flex-col gap-4">
         <StationsMap
           ref={mapRef}

website/src/components/tides/NearbyStations.tsx

@@ -2,7 +2,6 @@ import { type ReactNode, useCallback } from "react";
 import { NeapsProvider, StationsMap, StationSearch } from "@neaps/react";
 import "@neaps/react/styles.css";
 import { API_HOST } from "../../utils/constants";
-import { preferredUnits } from "../../utils/units";
 import { BottomDrawer } from "../ui/BottomDrawer";
 import { useMapStyle } from "../../utils/useMapStyle";
 
@@ -17,7 +16,7 @@ export function StationsMapIsland({ children }: Props) {
   }, []);
 
   return (
-    <NeapsProvider baseUrl={API_HOST} units={preferredUnits}>
+    <NeapsProvider baseUrl={API_HOST}>
       {/* Inline height so h-full on StationsMap resolves; calc subtracts the fixed header */}
       <div className="absolute inset-0 h-full w-full">
         <StationsMap
@@ -32,7 +31,10 @@ export function StationsMapIsland({ children }: Props) {
         >
           {/* Desktop sidebar */}
           <div className="header-padding absolute top-0 left-4 z-10 hidden w-96 flex-col gap-4 md:flex">
-            <StationSearch onSelect={handleStationSelect} />
+            <StationSearch
+              onSelect={handleStationSelect}
+              className="card-glass rounded-3xl p-0"
+            />
             {children}
           </div>
 

website/src/components/tides/StationsMapIsland.tsx

@@ -1,8 +1,8 @@
-import { Component, type ReactNode } from "react";
-import { NeapsProvider, TideStation } from "@neaps/react";
+import { Component, type ReactNode, useMemo } from "react";
+import { NeapsProvider, TideStation, createQueryClient } from "@neaps/react";
+import { hydrate, type DehydratedState } from "@tanstack/react-query";
 import "@neaps/react/styles.css";
 import { API_HOST } from "../../utils/constants";
-import { preferredUnits } from "../../utils/units";
 
 class ErrorBoundary extends Component<
   { children: ReactNode },
@@ -27,12 +27,21 @@ class ErrorBoundary extends Component<
 
 interface Props {
   id: string;
+  dehydratedState?: DehydratedState;
 }
 
-export function TideStationIsland({ id }: Props) {
+export function TideStationIsland({ id, dehydratedState }: Props) {
+  const queryClient = useMemo(() => {
+    const client = createQueryClient();
+    if (dehydratedState) {
+      hydrate(client, dehydratedState);
+    }
+    return client;
+  }, [dehydratedState]);
+
   return (
     <ErrorBoundary>
-      <NeapsProvider baseUrl={API_HOST} units={preferredUnits}>
+      <NeapsProvider baseUrl={API_HOST} queryClient={queryClient}>
         <TideStation id={id} />
       </NeapsProvider>
     </ErrorBoundary>

website/src/components/tides/TideStationIsland.tsx

@@ -7,6 +7,12 @@ import { TideStationIsland } from "../../../components/tides/TideStationIsland";
 import { NearbyStationsIsland } from "../../../components/tides/NearbyStations";
 import { Icon } from "astro-icon/components";
 import { API_HOST } from "../../../utils/constants";
+import {
+  createQueryClient,
+  prefetchTideStation,
+  prefetchNearbyStations,
+  dehydrate,
+} from "@neaps/react";
 
 // Enable server-side rendering for this route
 export const prerender = false;
@@ -26,6 +32,21 @@ if (station.offsets?.reference) {
     referenceStation = await refResponse.json();
   }
 }
+
+// Determine locale from Accept-Language header
+const acceptLang = Astro.request.headers.get("accept-language") ?? "";
+const locale = acceptLang.split(",")[0]?.split(";")[0]?.trim() || "en-US";
+
+// Prefetch tide data so React islands render with data immediately
+const queryClient = createQueryClient();
+await Promise.all([
+  prefetchTideStation(queryClient, API_HOST, station.id, { locale }),
+  prefetchNearbyStations(queryClient, API_HOST, {
+    latitude: station.latitude,
+    longitude: station.longitude,
+  }),
+]);
+const dehydratedState = dehydrate(queryClient);
 ---
 
 <MainLayout title={station.name} description={`Tide station: ${station.name}`}>
@@ -58,7 +79,11 @@ if (station.offsets?.reference) {
             )
         }
 
-        <TideStationIsland client:load id={station.id} />
+        <TideStationIsland
+          client:load
+          id={station.id}
+          dehydratedState={dehydratedState}
+        />
 
         <Card class="mt-8">
           <section>
@@ -288,6 +313,7 @@ console.log(extremes);`}</code></pre>
           stationId={station.id}
           latitude={station.latitude}
           longitude={station.longitude}
+          dehydratedState={dehydratedState}
         />
       </div>
     </div>