docs(playgrounds): prevent server-side execution of SSE query in Nuxt

[AuroraTea]

This PR fixes an issue in the Nuxt example that uses useQuery with oRPC's SSE (experimental_streamedOptions).
Previously, the query would run during server-side rendering, leading to hydration errors because SSE requires a persistent client-side connection.

Summary by CodeRabbit

• Bug Fixes
  • Improved handling of streamed data output to ensure it displays correctly across all rendering scenarios.

[coderabbitai]

📝 Walkthrough

Walkthrough

Modified a Nuxt component to prevent server-side rendering issues by conditionally enabling Tanstack Query's experimental_streamedOptions configuration for client-only execution and wrapping the output in a <ClientOnly> wrapper.

Changes

Cohort / File(s)	Summary
Client-only SSR Prevention playgrounds/nuxt/app/components/orpc-stream.vue	Added conditional query enablement (enabled: import.meta.client) to Tanstack Query configuration and wrapped template output in <ClientOnly> component to prevent server-side rendering of streamed data.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A stream flows pure on client terrain,
With SSR shadows now refrained,
ClientOnly guards the data's way,
No server-side leaks today!
Hop goes the fix, neat and tight! 🌟

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'docs(playgrounds): prevent server-side execution of SSE query in Nuxt' is misleading. The PR objectives indicate this is a fix (not just documentation), and the actual changes are code modifications, not documentation updates.	Update the title to 'fix(playground/nuxt): prevent server-side execution of SSE query' to accurately reflect that this is a functional fix, not a documentation change.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request updates the orpc-stream.vue component to ensure that the streamed options query and its rendered output are restricted to the client side. This is achieved by setting the enabled property to import.meta.client in the useQuery hook and wrapping the data display in a ClientOnly component. I have no feedback to provide as there were no review comments.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[pkg-pr-new]

More templates

• @orpc/astro-playground
• @orpc/browser-extension-playground
• @orpc/bun-websocket-otel-playground
• @orpc/cloudflare-worker-playground
• @orpc/contract-first-playground
• @orpc/electron-playground
• @orpc/nest-playground
• @orpc/next-playground
• @orpc/nuxt-playground
• @orpc/solid-start-playground
• @orpc/svelte-kit-playground
• @orpc/tanstack-start-playground

@orpc/ai-sdk

npm i https://pkg.pr.new/@orpc/ai-sdk@1516

@orpc/arktype

npm i https://pkg.pr.new/@orpc/arktype@1516

@orpc/client

npm i https://pkg.pr.new/@orpc/client@1516

@orpc/contract

npm i https://pkg.pr.new/@orpc/contract@1516

@orpc/experimental-durable-iterator

npm i https://pkg.pr.new/@orpc/experimental-durable-iterator@1516

@orpc/hey-api

npm i https://pkg.pr.new/@orpc/hey-api@1516

@orpc/interop

npm i https://pkg.pr.new/@orpc/interop@1516

@orpc/json-schema

npm i https://pkg.pr.new/@orpc/json-schema@1516

@orpc/nest

npm i https://pkg.pr.new/@orpc/nest@1516

@orpc/openapi

npm i https://pkg.pr.new/@orpc/openapi@1516

@orpc/openapi-client

npm i https://pkg.pr.new/@orpc/openapi-client@1516

@orpc/otel

npm i https://pkg.pr.new/@orpc/otel@1516

@orpc/experimental-pino

npm i https://pkg.pr.new/@orpc/experimental-pino@1516

@orpc/experimental-publisher

npm i https://pkg.pr.new/@orpc/experimental-publisher@1516

@orpc/experimental-publisher-durable-object

npm i https://pkg.pr.new/@orpc/experimental-publisher-durable-object@1516

@orpc/experimental-ratelimit

npm i https://pkg.pr.new/@orpc/experimental-ratelimit@1516

@orpc/react

npm i https://pkg.pr.new/@orpc/react@1516

@orpc/react-query

npm i https://pkg.pr.new/@orpc/react-query@1516

@orpc/experimental-react-swr

npm i https://pkg.pr.new/@orpc/experimental-react-swr@1516

@orpc/server

npm i https://pkg.pr.new/@orpc/server@1516

@orpc/shared

npm i https://pkg.pr.new/@orpc/shared@1516

@orpc/solid-query

npm i https://pkg.pr.new/@orpc/solid-query@1516

@orpc/standard-server

npm i https://pkg.pr.new/@orpc/standard-server@1516

@orpc/standard-server-aws-lambda

npm i https://pkg.pr.new/@orpc/standard-server-aws-lambda@1516

@orpc/standard-server-fastify

npm i https://pkg.pr.new/@orpc/standard-server-fastify@1516

@orpc/standard-server-fetch

npm i https://pkg.pr.new/@orpc/standard-server-fetch@1516

@orpc/standard-server-node

npm i https://pkg.pr.new/@orpc/standard-server-node@1516

@orpc/standard-server-peer

npm i https://pkg.pr.new/@orpc/standard-server-peer@1516

@orpc/svelte-query

npm i https://pkg.pr.new/@orpc/svelte-query@1516

@orpc/tanstack-query

npm i https://pkg.pr.new/@orpc/tanstack-query@1516

@orpc/trpc

npm i https://pkg.pr.new/@orpc/trpc@1516

@orpc/valibot

npm i https://pkg.pr.new/@orpc/valibot@1516

@orpc/vue-colada

npm i https://pkg.pr.new/@orpc/vue-colada@1516

@orpc/vue-query

npm i https://pkg.pr.new/@orpc/vue-query@1516

@orpc/zod

npm i https://pkg.pr.new/@orpc/zod@1516

commit: 1c155d7