+
+ Angular SSR + client-only island + persistence
+ SSR queries vs client-only persisted queries
+
+ Posts use queryKey: ['posts'] and run on the server.
+ Configure the persister with
+ dehydrateOptions.shouldDehydrateQuery if you want only
+ client-persist keys in localStorage.
+
+
+ The panel below is mounted only in the browser via
+ afterNextRender, so its query never runs during SSR.
+ After the first visit, hard-reload: the timestamp can be restored from
+ persistence while posts render from SSR again.
+
+
+
+
+
+
+ Client-only (afterNextRender)
+ @if (showClientDemo()) {
+
+ } @else {
+
+ Server render: this placeholder has no
+ client-persist-demo component yet — it is created after
+ the first browser frame via afterNextRender.
+
+ }
+
+
+ `,
+ styles: `
+ .page {
+ max-width: 960px;
+ margin: 0 auto;
+ padding: 48px 20px 72px;
+ }
+
+ .hero {
+ margin-bottom: 32px;
+ }
+
+ .eyebrow {
+ margin: 0 0 8px;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: #9b5c00;
+ }
+
+ h1 {
+ margin: 0 0 12px;
+ font-size: clamp(2.2rem, 5vw, 4rem);
+ line-height: 1;
+ }
+
+ .lede {
+ max-width: 640px;
+ margin: 0 0 12px;
+ font-size: 1rem;
+ line-height: 1.6;
+ color: #4b5563;
+ }
+
+ .hint {
+ font-size: 0.95rem;
+ color: #6b7280;
+ }
+
+ code {
+ font-size: 0.88em;
+ padding: 0.1em 0.35em;
+ border-radius: 4px;
+ background: #f3f4f6;
+ }
+
+ .region {
+ margin-bottom: 40px;
+ }
+
+ .region-title {
+ margin: 0 0 16px;
+ font-size: 1.25rem;
+ color: #1f2937;
+ }
+
+ .placeholder {
+ margin: 0;
+ padding: 16px;
+ border-radius: 12px;
+ background: #f9fafb;
+ color: #6b7280;
+ line-height: 1.5;
+ }
+ `,
+})
+export class SsrPersistExampleComponent {
+ /** When `true`, `ClientPersistDemoComponent` exists only in the browser (not during SSR). */
+ readonly showClientDemo = signal(false)
+
+ constructor() {
+ afterNextRender(() => {
+ this.showClientDemo.set(true)
+ })
+ }
+}
diff --git a/examples/angular/ssr-persist/src/app/app.config.server.ts b/examples/angular/ssr-persist/src/app/app.config.server.ts
new file mode 100644
index 00000000000..a1a957f51c4
--- /dev/null
+++ b/examples/angular/ssr-persist/src/app/app.config.server.ts
@@ -0,0 +1,8 @@
+import { mergeApplicationConfig } from '@angular/core'
+import { provideServerRendering, withRoutes } from '@angular/ssr'
+import { appConfig } from './app.config'
+import { serverRoutes } from './app.routes.server'
+
+export const serverConfig = mergeApplicationConfig(appConfig, {
+ providers: [provideServerRendering(withRoutes(serverRoutes))],
+})
diff --git a/examples/angular/ssr-persist/src/app/app.config.ts b/examples/angular/ssr-persist/src/app/app.config.ts
new file mode 100644
index 00000000000..d8bb855fe3a
--- /dev/null
+++ b/examples/angular/ssr-persist/src/app/app.config.ts
@@ -0,0 +1,31 @@
+import { provideHttpClient, withFetch } from '@angular/common/http'
+import type { ApplicationConfig } from '@angular/core'
+import {
+ provideClientHydration,
+ withEventReplay,
+} from '@angular/platform-browser'
+import { provideTanStackQuery } from '@tanstack/angular-query'
+import { withDevtools } from '@tanstack/angular-query-devtools'
+import { withPersistQueryClient } from '@tanstack/angular-query-persist-client'
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
+import { PERSIST_STORAGE_KEY, createQueryClient } from './query-client'
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideHttpClient(withFetch()),
+ provideClientHydration(withEventReplay()),
+ provideTanStackQuery(
+ createQueryClient,
+ withDevtools(),
+ withPersistQueryClient(() => ({
+ persistOptions: {
+ persister: createAsyncStoragePersister({
+ storage: localStorage,
+ key: PERSIST_STORAGE_KEY,
+ throttleTime: 1000,
+ }),
+ },
+ })),
+ ),
+ ],
+}
diff --git a/examples/angular/ssr-persist/src/app/app.routes.server.ts b/examples/angular/ssr-persist/src/app/app.routes.server.ts
new file mode 100644
index 00000000000..09fcfa3cc95
--- /dev/null
+++ b/examples/angular/ssr-persist/src/app/app.routes.server.ts
@@ -0,0 +1,9 @@
+import { RenderMode } from '@angular/ssr'
+import type { ServerRoute } from '@angular/ssr'
+
+export const serverRoutes: Array