init commit,

99_references/supabase-examples/caching/with-react-query-nextjs-14/app/ssrcountries/[id]/page.tsx

@@ -0,0 +1,30 @@
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query'
+import { prefetchQuery } from '@supabase-cache-helpers/postgrest-react-query'
+import useSupabaseServer from '@/utils/supabase-server'
+import { cookies } from 'next/headers'
+import Country from '../country'
+import { getCountryById } from '@/queries/get-country-by-id'
+
+export default async function CountryPage({
+  params,
+}: {
+  params: { id: number }
+}) {
+  const queryClient = new QueryClient()
+  const cookieStore = cookies()
+  const supabase = useSupabaseServer(cookieStore)
+
+  await prefetchQuery(queryClient, getCountryById(supabase, params.id))
+
+  return (
+    // Neat! Serialization is now as easy as passing props.
+    // HydrationBoundary is a Client Component, so hydration will happen there.
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Country id={params.id} />
+    </HydrationBoundary>
+  )
+}

99_references/supabase-examples/caching/with-react-query-nextjs-14/app/ssrcountries/country.tsx

@@ -0,0 +1,19 @@
+// app/posts/posts.jsx
+'use client'
+
+import useSupabaseBrowser from '@/utils/supabase-browser'
+import { getCountryById } from '@/queries/get-country-by-id'
+import { useQuery } from '@supabase-cache-helpers/postgrest-react-query'
+
+export default function Country({ id }: { id: number }) {
+  const supabase = useSupabaseBrowser()
+  // This useQuery could just as well happen in some deeper
+  // child to <Posts>, data will be available immediately either way
+  const { data: country } = useQuery(getCountryById(supabase, id))
+
+  return (
+    <div>
+      <h1>SSR: {country?.name}</h1>
+    </div>
+  )
+}