diff --git a/examples/nextjs/app/items-list.tsx b/examples/nextjs/app/items-list.tsx
index 38c20df3f6..af9c4ab80f 100644
--- a/examples/nextjs/app/items-list.tsx
+++ b/examples/nextjs/app/items-list.tsx
@@ -1,8 +1,10 @@
 "use client"
-
-import { v4 as uuidv4 } from "uuid"
-import { useOptimistic, startTransition } from "react"
-import { useShape, getShapeStream } from "@electric-sql/react"
+import { startTransition, useState, useCallback, useEffect } from "react"
+import {
+  HydratedShapeData,
+  getShapeStream,
+  useShape,
+} from "@electric-sql/react"
 import { ItemsView } from "./items-view"
 import { matchStream } from "./match-stream"
 import { type Item } from "./types"
@@ -49,34 +51,74 @@ async function clearItems() {
 
 export function ItemsList() {
   const shapeOptions = getClientShapeOptions()
-  const { data: rows } = useShape<Item>(shapeOptions)
-  const [optimisticItems, updateOptimisticItems] = useOptimistic<
-    Item[],
-    { newId?: string; isClear?: boolean }
-  >(rows, (state, { newId, isClear }) => {
-    // If clearing, return empty array
-    if (isClear) {
-      return []
-    }
-
-    // Create a new array combining all sources
-    const allItems = [...rows, ...state]
-    if (newId) {
-      const newItem = { id: newId, value: `Item ${newId.slice(0, 4)}` }
-      allItems.push(newItem)
-    }
-
-    // Deduplicate by id, keeping the last occurrence of each id
-    const uniqueItems = allItems.reduce((acc, item) => {
-      acc[item.id] = item
-      return acc
-    }, {} as Record<string, Item>)
-
-    return Object.values(uniqueItems)
-  })
+  const { data: items } = useShape<Item>(shapeOptions)
+
+  const [optimisticItems, setOptimisticItems] = useState(items)
+
+  useEffect(() => {
+    setOptimisticItems(items)
+  }, [items])
+
+  const updateOptimisticItems = useCallback(
+    ({ newId, isClear }: Partial<{ newId: string; isClear: boolean }>) =>
+      setOptimisticItems((items) => {
+        // If clearing, return empty array
+        if (isClear) {
+          return []
+        }
+
+        // Create a new array combining all sources
+        const allItems = [...items, ...optimisticItems]
+        if (newId) {
+          const newItem = { id: newId, value: `Item ${newId.slice(0, 4)}` }
+          allItems.push(newItem)
+        }
+
+        // Deduplicate by id, keeping the last occurrence of each id
+        const uniqueItems = allItems.reduce(
+          (acc, item) => {
+            acc[item.id] = item
+            return acc
+          },
+          {} as Record<string, Item>
+        )
+
+        return Object.values(uniqueItems)
+      }),
+    []
+  )
+
+  // Pages can't use useOptimistic hook, so I'm using useState for now
+  // const [optimisticItems, updateOptimisticItems] = useOptimistic<
+  //   Item[],
+  //   { newId?: string; isClear?: boolean }
+  // >(items, (state, { newId, isClear }) => {
+  //   // If clearing, return empty array
+  //   if (isClear) {
+  //     return []
+  //   }
+
+  //   // Create a new array combining all sources
+  //   const allItems = [...items, ...state]
+  //   if (newId) {
+  //     const newItem = { id: newId, value: `Item ${newId.slice(0, 4)}` }
+  //     allItems.push(newItem)
+  //   }
+
+  //   // Deduplicate by id, keeping the last occurrence of each id
+  //   const uniqueItems = allItems.reduce(
+  //     (acc, item) => {
+  //       acc[item.id] = item
+  //       return acc
+  //     },
+  //     {} as Record<string, Item>
+  //   )
+
+  //   return Object.values(uniqueItems)
+  // })
 
   const handleAdd = async () => {
-    const id = uuidv4()
+    const id = crypto.randomUUID()
     startTransition(async () => {
       updateOptimisticItems({ newId: id })
       await createItem(id)
diff --git a/examples/nextjs/app/items.tsx b/examples/nextjs/app/items.tsx
index 3b203c130e..e674cc9e73 100644
--- a/examples/nextjs/app/items.tsx
+++ b/examples/nextjs/app/items.tsx
@@ -1,4 +1,3 @@
-import { preloadShape } from "@electric-sql/react"
 import { ShapeStreamOptions } from "@electric-sql/client"
 
 // Server-side shape configuration
@@ -16,10 +15,3 @@ export const getClientShapeOptions = (): ShapeStreamOptions => {
     url: `http://localhost:5173/shape-proxy`,
   }
 }
-
-// Server component to prefetch shape data
-export async function ItemsData() {
-  // Prefetch shape data during SSR
-  await preloadShape(itemShapeOptions)
-  return null
-}
diff --git a/examples/nextjs/app/layout.tsx b/examples/nextjs/app/layout.tsx
index dded27eb6a..dc6dd7d09c 100644
--- a/examples/nextjs/app/layout.tsx
+++ b/examples/nextjs/app/layout.tsx
@@ -1,5 +1,7 @@
-import "./style.css"
 import "./App.css"
+import "./Example.css"
+import "./style.css"
+import { HydrationBoundary } from "@electric-sql/react/HydrationBoundary"
 
 export const metadata = {
   title: `Next.js Forms Example`,
@@ -14,12 +16,14 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <div className="App">
-          <header className="App-header">
-            <img src="/logo.svg" className="App-logo" alt="logo" />
-            {children}
-          </header>
-        </div>
+        <HydrationBoundary>
+          <div className="App">
+            <header className="App-header">
+              <img src="/logo.svg" className="App-logo" alt="logo" />
+              {children}
+            </header>
+          </div>
+        </HydrationBoundary>
       </body>
     </html>
   )
diff --git a/examples/nextjs/app/page.tsx b/examples/nextjs/app/page.tsx
index 21bf0f38a5..6811458889 100644
--- a/examples/nextjs/app/page.tsx
+++ b/examples/nextjs/app/page.tsx
@@ -1,14 +1,10 @@
-import dynamic from 'next/dynamic'
-import "./Example.css"
+import { ItemsList } from "./items-list"
+import type { Item } from "./types"
+import { preloadShape } from "@electric-sql/react"
+import { itemShapeOptions } from "./items"
 
-// Dynamic import of ItemsList with SSR disabled
-const ClientItemsList = dynamic(
-  () => import('./items-list').then(mod => mod.ItemsList),
-  {
-    ssr: false,
-  }
-)
+export default async function Page() {
+  await preloadShape<Item>(itemShapeOptions)
 
-export default function Page() {
-  return <ClientItemsList />
+  return <ItemsList />
 }
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index b6ef1252eb..cd230b73bf 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -9,7 +9,7 @@
     "backend:up": "PROJECT_NAME=nextjs-example pnpm -C ../../ run example-backend:up && pnpm db:migrate",
     "backend:down": "PROJECT_NAME=nextjs-example pnpm -C ../../ run example-backend:down",
     "db:migrate": "dotenv -e ../../.env.dev -- pnpm exec pg-migrations apply --directory ./db/migrations",
-    "dev": "next dev --turbo -p 5174",
+    "dev": "next dev --turbo -p 5173",
     "build": "next build",
     "start": "next start",
     "format": "eslint . --fix",
diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
new file mode 100644
index 0000000000..831d244b6b
--- /dev/null
+++ b/examples/nextjs/pages/_app.tsx
@@ -0,0 +1,18 @@
+import { AppProps } from "next/app"
+import { HydrationBoundary } from "@electric-sql/react/HydrationBoundary"
+import "@/app/style.css"
+import "@/app/App.css"
+import "@/app/Example.css"
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <HydrationBoundary>
+      <div className="App">
+        <header className="App-header">
+          <img src="/logo.svg" className="App-logo" alt="logo" />
+          <Component {...pageProps} />
+        </header>
+      </div>
+    </HydrationBoundary>
+  )
+}
diff --git a/examples/nextjs/pages/ssr/index.tsx b/examples/nextjs/pages/ssr/index.tsx
new file mode 100644
index 0000000000..21e0c6eff0
--- /dev/null
+++ b/examples/nextjs/pages/ssr/index.tsx
@@ -0,0 +1,19 @@
+import type { GetServerSideProps } from "next"
+import { preloadShape } from "@electric-sql/react"
+import { itemShapeOptions } from "@/app/items"
+import { Item } from "@/app/types"
+import "@/app/App.css"
+import "@/app/style.css"
+import { ItemsList } from "@/app/items-list"
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  await preloadShape<Item>(itemShapeOptions)
+
+  return {
+    props: {},
+  }
+}
+
+export default function Page() {
+  return <ItemsList />
+}
diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
index d221fae93c..e7df909bf6 100644
--- a/packages/react-hooks/package.json
+++ b/packages/react-hooks/package.json
@@ -45,6 +45,16 @@
         "types": "./dist/cjs/index.d.cts",
         "default": "./dist/cjs/index.cjs"
       }
+    },
+    "./HydrationBoundary": {
+      "import": {
+        "types": "./dist/hydrationBoundary.d.ts",
+        "default": "./dist/hydrationBoundary.mjs"
+      },
+      "require": {
+        "types": "./dist/cjs/hydrationBoundary.d.cts",
+        "default": "./dist/cjs/hydrationBoundary.cjs"
+      }
     }
   },
   "files": [
diff --git a/packages/react-hooks/src/hydration-boundary.tsx b/packages/react-hooks/src/hydration-boundary.tsx
new file mode 100644
index 0000000000..0fc67ab3e2
--- /dev/null
+++ b/packages/react-hooks/src/hydration-boundary.tsx
@@ -0,0 +1,79 @@
+'use client'
+import React from 'react'
+import { hydrateShape, dehydrateShape, HydratedShapeData } from './hydration'
+import { shapeCache, streamCache, sortedOptionsHash } from './react-hooks'
+import { Shape, ShapeStream } from '@electric-sql/client'
+import type { Row } from '@electric-sql/client'
+
+const isSSR = typeof window === 'undefined' || 'Deno' in globalThis
+
+type ElectricScriptProps = {
+  shapes: Shape<Row<unknown>>[]
+}
+
+const ElectricScript = ({ shapes }: ElectricScriptProps) => {
+  if (!isSSR) {
+    return null
+  }
+
+  const isLoading = shapes.some((shape) => shape.isLoading())
+
+  if (isLoading) {
+    return null
+  }
+
+  const hydratedShapes = shapes.reduce<HydratedShapeData[]>(
+    (hydratedShapes, shape) => {
+      return [...hydratedShapes, hydrateShape(shape)]
+    },
+    []
+  )
+
+  return (
+    <script
+      id="__ELECTRIC_SSR_STATE__"
+      type="application/json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(hydratedShapes),
+      }}
+    />
+  )
+}
+
+export function HydrationBoundary({ children }: { children: React.ReactNode }) {
+  const shapeCacheRef = React.useRef<typeof shapeCache>(shapeCache)
+  const streamCacheRef = React.useRef<typeof streamCache>(streamCache)
+  const isHydratedRef = React.useRef<boolean>(false)
+
+  if (!isSSR && !isHydratedRef.current) {
+    const ssrData = document?.getElementById('__ELECTRIC_SSR_STATE__')
+    const hydratedShapes: Array<HydratedShapeData> =
+      JSON.parse(ssrData?.textContent ?? '[]') ?? []
+
+    for (const hydratedShape of hydratedShapes) {
+      const isEmpty = Object.keys(hydratedShape.value).length === 0
+
+      if (isEmpty) {
+        continue
+      }
+
+      const shape = dehydrateShape(hydratedShape)
+      const stream = shape.stream as ShapeStream<Row<unknown>>
+
+      const hash = sortedOptionsHash(shape.stream.options)
+      streamCacheRef.current.set(hash, stream)
+      shapeCacheRef.current.set(stream, shape)
+    }
+
+    isHydratedRef.current = true
+  }
+
+  const shapes = Array.from(shapeCacheRef.current.values())
+
+  return (
+    <>
+      {children}
+      <ElectricScript shapes={shapes} />
+    </>
+  )
+}
diff --git a/packages/react-hooks/src/hydration.ts b/packages/react-hooks/src/hydration.ts
new file mode 100644
index 0000000000..014c8ccdb2
--- /dev/null
+++ b/packages/react-hooks/src/hydration.ts
@@ -0,0 +1,37 @@
+import type {
+  Row,
+  ShapeStreamOptions,
+  GetExtensions,
+} from '@electric-sql/client'
+import { ShapeStream, Shape } from '@electric-sql/client'
+
+export type HydratedShapeData<SourceData extends Row<unknown> = Row<unknown>> =
+  {
+    value: Record<string, SourceData>
+    options: ShapeStreamOptions<GetExtensions<SourceData>>
+  }
+
+export const hydrateShape = <SourceData extends Row<unknown>>(
+  shape: Shape<SourceData>
+): HydratedShapeData<SourceData> => {
+  return {
+    value: Object.fromEntries(shape.currentValue),
+    options: {
+      ...shape.options,
+      handle: shape.handle,
+      offset: shape.offset,
+    },
+  }
+}
+
+export const dehydrateShape = <SourceData extends Row<unknown>>(
+  hydratedShape: HydratedShapeData<SourceData>
+): Shape<SourceData> => {
+  const stream = new ShapeStream<SourceData>({
+    ...hydratedShape.options,
+    live: true,
+  })
+  const shape = new Shape<SourceData>(stream)
+  shape.currentValue = new Map(Object.entries(hydratedShape.value))
+  return shape
+}
diff --git a/packages/react-hooks/src/react-hooks.tsx b/packages/react-hooks/src/react-hooks.tsx
index 5399d9dcfe..2c9e078f99 100644
--- a/packages/react-hooks/src/react-hooks.tsx
+++ b/packages/react-hooks/src/react-hooks.tsx
@@ -1,69 +1,25 @@
-import {
-  Shape,
-  ShapeStream,
+import { Shape, ShapeStream } from '@electric-sql/client'
+import type {
   ShapeStreamOptions,
   Row,
   GetExtensions,
-  Offset,
 } from '@electric-sql/client'
-import React, { createContext, useContext } from 'react'
+import React from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'
 
-declare global {
-  // eslint-disable-next-line
-  var document:
-    | {
-        getElementById(id: string): { textContent?: string } | null
-      }
-    | undefined
-}
-
-const isSSR = typeof globalThis !== `undefined` && !(`window` in globalThis)
-
 type UnknownShape = Shape<Row<unknown>>
 type UnknownShapeStream = ShapeStream<Row<unknown>>
 
-const streamCache = new Map<string, UnknownShapeStream>()
-const shapeCache = new Map<UnknownShapeStream, UnknownShape>()
-
-// SSR types
-interface SSRShapeData<T extends Row<unknown>> {
-  rows: [string, T][] // Array of [key, value] tuples
-  lastSyncedAt: number | undefined
-  offset: Offset | undefined
-  handle: string | undefined
-}
-
-interface SSRState {
-  // eslint-disable-next-line
-  shapes: { [key: string]: SSRShapeData<any> }
-}
-
-let ssrState: SSRState | undefined
-
-function hydrateSSRState() {
-  if (typeof globalThis !== `undefined` && globalThis.document) {
-    const scriptEl = globalThis.document.getElementById(
-      `__ELECTRIC_SSR_STATE__`
-    )
-    if (scriptEl?.textContent) {
-      try {
-        ssrState = JSON.parse(scriptEl.textContent)
-      } catch (e) {
-        console.error(`Failed to parse SSR state:`, e)
-      }
-    }
-  }
-}
-
-hydrateSSRState()
+export const streamCache = new Map<string, UnknownShapeStream>()
+export const shapeCache = new Map<UnknownShapeStream, UnknownShape>()
 
 export async function preloadShape<T extends Row<unknown>>(
   options: ShapeStreamOptions<GetExtensions<T>>
 ): Promise<Shape<T>> {
-  const optionsHash = sortedOptionsHash(options)
-  const shapeStream = getShapeStream<T>(options, optionsHash)
-  return getShape<T>(shapeStream, optionsHash)
+  const shapeStream = getShapeStream<T>(options)
+  const shape = getShape<T>(shapeStream)
+  await shape.rows
+  return shape
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -86,13 +42,16 @@ function sortObjectKeys(obj: any): any {
 }
 
 export function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {
-  return JSON.stringify(sortObjectKeys(options))
+  return JSON.stringify(
+    sortObjectKeys({ url: options.url, params: options.params })
+  )
 }
 
 export function getShapeStream<T extends Row<unknown>>(
-  options: ShapeStreamOptions<GetExtensions<T>>,
-  optionsHash: string
+  options: ShapeStreamOptions<GetExtensions<T>>
 ): ShapeStream<T> {
+  const optionsHash = sortedOptionsHash(options)
+
   // If the stream is already cached, return it if valid
   if (streamCache.has(optionsHash)) {
     const cachedStream = streamCache.get(optionsHash)!
@@ -102,21 +61,13 @@ export function getShapeStream<T extends Row<unknown>>(
     streamCache.delete(optionsHash)
   }
 
-  // Create stream with SSR offset if available
-  const streamOptions = {
-    ...options,
-    offset: ssrState?.shapes[optionsHash]?.offset,
-    handle: ssrState?.shapes[optionsHash]?.handle,
-  }
-
-  const newShapeStream = new ShapeStream<T>(streamOptions)
+  const newShapeStream = new ShapeStream<T>(options)
   streamCache.set(optionsHash, newShapeStream)
   return newShapeStream
 }
 
 export function getShape<T extends Row<unknown>>(
-  shapeStream: ShapeStream<T>,
-  optionsHash: string
+  shapeStream: ShapeStream<T>
 ): Shape<T> {
   // If the stream is already cached, return it if valid
   if (shapeCache.has(shapeStream)) {
@@ -129,15 +80,6 @@ export function getShape<T extends Row<unknown>>(
   // Create new shape
   const newShape = new Shape<T>(shapeStream)
 
-  // Check for SSR data
-  const ssrData = ssrState?.shapes[optionsHash]
-
-  if (ssrData) {
-    // Initialize shape with SSR data - convert array of entries back to Map
-    const dataMap = new Map(ssrData.rows)
-    newShape.initializeWithSSRData(dataMap)
-  }
-
   shapeCache.set(shapeStream, newShape)
   return newShape
 }
@@ -199,80 +141,6 @@ interface UseShapeOptions<SourceData extends Row<unknown>, Selection>
   selector?: (value: UseShapeResult<SourceData>) => Selection
 }
 
-// Context for tracking shapes used in current render
-const ShapesContext = createContext<Set<string> | null>(null)
-
-function useShapes() {
-  const shapes = useContext(ShapesContext)
-  // Only require provider during SSR
-  if (!shapes && isSSR) {
-    throw new Error(
-      `No ElectricProvider found. Wrap your app with ElectricProvider when using SSR.`
-    )
-  }
-  return shapes || new Set()
-}
-
-function useTrackShape(optionsHash: string) {
-  const shapes = useShapes()
-  shapes.add(optionsHash)
-}
-
-// Function to serialize SSR state for ElectricScripts
-function serializeSSRState(usedShapes: Set<string>): string {
-  // eslint-disable-next-line
-  const shapes: { [key: string]: SSRShapeData<any> } = {}
-
-  // Only get shapes that were used in this render
-  for (const optionsHash of usedShapes) {
-    try {
-      // Parse the options from the hash
-      const options = JSON.parse(optionsHash)
-      const stream = getShapeStream<Row<unknown>>(options, optionsHash)
-      const shape = getShape<Row<unknown>>(stream, optionsHash)
-      shapes[optionsHash] = {
-        rows: Array.from(shape.currentValue.entries()),
-        lastSyncedAt: shape.lastSyncedAt(),
-        offset: shape.offset,
-        handle: shape.handle,
-      }
-    } catch (e) {
-      console.error(`Failed to parse shape options:`, e)
-    }
-  }
-
-  return JSON.stringify({ shapes })
-}
-
-export function ElectricScripts() {
-  const shapes = useShapes()
-
-  // On client, reuse the server-rendered content
-  const content =
-    !isSSR && globalThis.document
-      ? globalThis.document.getElementById(`__ELECTRIC_SSR_STATE__`)
-          ?.textContent || ``
-      : serializeSSRState(shapes)
-
-  return (
-    <script
-      id="__ELECTRIC_SSR_STATE__"
-      type="application/json"
-      dangerouslySetInnerHTML={{
-        __html: content,
-      }}
-    />
-  )
-}
-
-export function ElectricProvider({ children }: { children: React.ReactNode }) {
-  return (
-    <ShapesContext.Provider value={new Set()}>
-      {children}
-    </ShapesContext.Provider>
-  )
-}
-
 export function useShape<
   SourceData extends Row<unknown> = Row,
   Selection = UseShapeResult<SourceData>,
@@ -281,15 +149,10 @@ export function useShape<
   ...options
 }: UseShapeOptions<SourceData, Selection> &
   ShapeStreamOptions<GetExtensions<SourceData>>): Selection {
-  const optionsHash = sortedOptionsHash(options)
-
-  // Only track shapes during SSR
-  if (isSSR) {
-    useTrackShape(optionsHash)
-  }
-
-  const shapeStream = getShapeStream<SourceData>(options, optionsHash)
-  const shape = getShape<SourceData>(shapeStream, optionsHash)
+  const shapeStream = getShapeStream<SourceData>(
+    options as ShapeStreamOptions<GetExtensions<SourceData>>
+  )
+  const shape = getShape<SourceData>(shapeStream)
 
   const useShapeData = React.useMemo(() => {
     let latestShapeData = parseShapeData(shape)
diff --git a/packages/react-hooks/tsconfig.build.json b/packages/react-hooks/tsconfig.build.json
index cab6e40eaf..f12716eeaf 100644
--- a/packages/react-hooks/tsconfig.build.json
+++ b/packages/react-hooks/tsconfig.build.json
@@ -3,6 +3,7 @@
   "include": ["src/**/*"],
   "exclude": ["node_modules", "tests", "dist"],
   "compilerOptions": {
+    "lib": ["DOM"],
     "paths": {
       "@electric-sql/client": ["../typescript-client/src"]
     }
diff --git a/packages/react-hooks/tsconfig.json b/packages/react-hooks/tsconfig.json
index b5c3207611..d1da40faff 100644
--- a/packages/react-hooks/tsconfig.json
+++ b/packages/react-hooks/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "lib": ["DOM"],
     "paths": {
       "@electric-sql/client": ["../typescript-client/src"]
     }
diff --git a/packages/react-hooks/tsup.config.ts b/packages/react-hooks/tsup.config.ts
index 102edb88d6..ab9e0c091a 100644
--- a/packages/react-hooks/tsup.config.ts
+++ b/packages/react-hooks/tsup.config.ts
@@ -5,6 +5,7 @@ export default defineConfig((options: Options) => {
   const commonOptions: Partial<Options> = {
     entry: {
       index: `src/index.ts`,
+      hydrationBoundary: `./src/hydration-boundary.tsx`,
     },
     tsconfig: `./tsconfig.build.json`,
     sourcemap: true,
diff --git a/packages/typescript-client/src/client.ts b/packages/typescript-client/src/client.ts
index fd558e3109..bc04aa4671 100644
--- a/packages/typescript-client/src/client.ts
+++ b/packages/typescript-client/src/client.ts
@@ -241,6 +241,8 @@ export interface ShapeStreamOptions<T = never> {
    * If the function returns void the shapestream is stopped.
    */
   onError?: ShapeStreamErrorHandler
+
+  live?: boolean
 }
 
 export interface ShapeStreamInterface<T extends Row<unknown> = Row> {
@@ -259,6 +261,7 @@ export interface ShapeStreamInterface<T extends Row<unknown> = Row> {
   lastOffset: Offset
   shapeHandle?: string
   error?: unknown
+  options: ShapeStreamOptions<GetExtensions<T>>
 }
 
 /**
@@ -300,7 +303,7 @@ export class ShapeStream<T extends Row<unknown> = Row>
     DEFAULT: `default` as Replica,
   }
 
-  readonly options: ShapeStreamOptions<GetExtensions<T>>
+  public readonly options: ShapeStreamOptions<GetExtensions<T>>
   #error: unknown = null
 
   readonly #fetchClient: typeof fetch
@@ -333,6 +336,11 @@ export class ShapeStream<T extends Row<unknown> = Row>
     this.#messageParser = new MessageParser<T>(options.parser)
     this.#onError = this.options.onError
 
+    if (options.live) {
+      this.#isUpToDate = true
+      this.#lastSyncedAt = Date.now()
+    }
+
     const baseFetchClient =
       options.fetchClient ??
       ((...args: Parameters<typeof fetch>) => fetch(...args))
diff --git a/packages/typescript-client/src/shape.ts b/packages/typescript-client/src/shape.ts
index e98f8f3dac..6cfece5560 100644
--- a/packages/typescript-client/src/shape.ts
+++ b/packages/typescript-client/src/shape.ts
@@ -145,7 +145,7 @@ export class Shape<T extends Row<unknown> = Row> {
   /**
    * Initialize shape with SSR data
    */
-  initializeWithSSRData(data: Map<string, T>) {
+  set currentValue(data: Map<string, T>) {
     // Clear existing data
     this.#data.clear()
 
@@ -227,6 +227,10 @@ export class Shape<T extends Row<unknown> = Row> {
     })
   }
 
+  get options() {
+    return this.stream.options
+  }
+
   /** Get the current offset of the shape stream */
   get offset(): Offset | undefined {
     return this.stream.lastOffset