docs: solid start ssr#562
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. WalkthroughThis update revises integration documentation and code examples for Next.js, Solid Start, and TanStack Start to add missing Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant orpc.ts
participant orpc.server.ts
participant Server
Browser->>orpc.ts: Import client
alt Browser environment
orpc.ts->>orpc.ts: Use createORPCClient(link)
else Server environment (SSR)
orpc.ts->>orpc.server.ts: Import global $client
orpc.server.ts->>Server: Create RouterClient with SSR context
orpc.server.ts-->>orpc.ts: Assign globalThis.$client
orpc.ts->>orpc.ts: Use globalThis.$client
end
orpc.ts-->>Browser: Export client instance
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅ 📢 Thoughts on this report? Let us know! |
More templates
@orpc/arktype
@orpc/client
@orpc/contract
@orpc/hey-api
@orpc/nest
@orpc/openapi
@orpc/openapi-client
@orpc/react
@orpc/react-query
@orpc/server
@orpc/shared
@orpc/solid-query
@orpc/standard-server
@orpc/standard-server-aws-lambda
@orpc/standard-server-fetch
@orpc/standard-server-node
@orpc/standard-server-peer
@orpc/svelte-query
@orpc/tanstack-query
@orpc/valibot
@orpc/vue-colada
@orpc/vue-query
@orpc/zod
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
apps/content/docs/integrations/solid-start.md (2)
8-8: Fix compound adjective hyphenation.-[SolidStart](https://start.solidjs.com/) is a full stack JavaScript framework for building web applications with SolidJS. +[SolidStart](https://start.solidjs.com/) is a full-stack JavaScript framework for building web applications with SolidJS.🧰 Tools
🪛 LanguageTool
[uncategorized] ~8-~8: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...Start](https://start.solidjs.com/) is a full stack JavaScript framework for building web a...(EN_COMPOUND_ADJECTIVE_INTERNAL)
67-67: Fix grammatical error in article usage.-To reduce HTTP requests and improve latency during SSR, you can utilize a [Server-Side Client](/docs/client/server-side) during SSR. Below is a quick setup, see [Optimize SSR](/docs/best-practices/optimize-ssr) for a more details. +To reduce HTTP requests and improve latency during SSR, you can utilize a [Server-Side Client](/docs/client/server-side) during SSR. Below is a quick setup, see [Optimize SSR](/docs/best-practices/optimize-ssr) for more details.🧰 Tools
🪛 LanguageTool
[grammar] ~67-~67: The plural noun “details” cannot be used with the article “a”. Did you mean “a more detail” or “more details”?
Context: ...(/docs/best-practices/optimize-ssr) for a more details. ::: code-group ```ts [src/lib/orpc.t...(A_NNS)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (21)
apps/content/docs/integrations/next.md(1 hunks)apps/content/docs/integrations/solid-start.md(3 hunks)apps/content/docs/integrations/tanstack-start.md(1 hunks)apps/content/package.json(1 hunks)packages/react-query/package.json(1 hunks)packages/solid-query/package.json(1 hunks)packages/svelte-query/package.json(1 hunks)packages/tanstack-query/package.json(1 hunks)packages/vue-query/package.json(1 hunks)playgrounds/electron/package.json(1 hunks)playgrounds/nuxt/package.json(1 hunks)playgrounds/solid-start/app.config.ts(1 hunks)playgrounds/solid-start/package.json(1 hunks)playgrounds/solid-start/src/app.tsx(1 hunks)playgrounds/solid-start/src/lib/orpc.server.ts(1 hunks)playgrounds/solid-start/src/lib/orpc.ts(1 hunks)playgrounds/solid-start/src/routes/orpc-mutation.tsx(1 hunks)playgrounds/solid-start/src/routes/orpc-query.tsx(2 hunks)playgrounds/solid-start/src/routes/rpc/[...rest].ts(3 hunks)playgrounds/svelte-kit/package.json(1 hunks)playgrounds/tanstack-start/package.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
playgrounds/solid-start/src/routes/rpc/[...rest].ts (2)
playgrounds/solid-start/src/routes/api/index.ts (1)
HEAD(3-3)playgrounds/solid-start/src/routes/api/[...rest].ts (2)
HEAD(62-62)handle(49-60)
🪛 LanguageTool
apps/content/docs/integrations/solid-start.md
[uncategorized] ~8-~8: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...Start](https://start.solidjs.com/) is a full stack JavaScript framework for building web a...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[grammar] ~67-~67: The plural noun “details” cannot be used with the article “a”. Did you mean “a more detail” or “more details”?
Context: ...(/docs/best-practices/optimize-ssr) for a more details. ::: code-group ```ts [src/lib/orpc.t...
(A_NNS)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: lint
- GitHub Check: publish-commit
🔇 Additional comments (32)
playgrounds/tanstack-start/package.json (1)
30-30: Alignvinxiversion for consistency
The devDependencyvinxiwas bumped from^0.5.4to^0.5.6to match other playgrounds. Ensure this patch upgrade does not introduce breaking changes and remember to update the lockfile accordingly.packages/svelte-query/package.json (1)
49-49: Bump@tanstack/svelte-queryto ^5.77.2
Updated the devDependency from^5.72.3for uniformity across the monorepo. Please verify compatibility with existing code and update your lockfile.playgrounds/nuxt/package.json (1)
18-18: Update@tanstack/vue-queryto ^5.77.2
The@tanstack/vue-querydevDependency was aligned with the monorepo standard. Confirm that this bump does not affect Nuxt integration and that the lockfile reflects the change.packages/vue-query/package.json (1)
49-49: Sync@tanstack/vue-queryversion
Upgraded the devDependency to^5.77.2to stay in step with sibling packages. Double-check for any breaking changes and regenerate the lockfile.packages/react-query/package.json (1)
49-49: Upgrade@tanstack/react-queryto ^5.77.2
Bumped the devDependency to maintain consistency across all query packages. Verify compatibility with peer dependencies and update the lockfile.playgrounds/electron/package.json (1)
24-24: Consistent dependency upgrade of @tanstack/react-query
Updated@tanstack/react-queryfrom^5.72.3to^5.77.2to align with the rest of the TanStack packages in the repo.packages/solid-query/package.json (1)
49-49: Consistent dependency upgrade of @tanstack/solid-query
Bumped@tanstack/solid-queryto^5.77.2in devDependencies to match other query packages.playgrounds/svelte-kit/package.json (1)
23-23: Consistent dependency upgrade of @tanstack/svelte-query
Updated@tanstack/svelte-queryto^5.77.2for consistency with related packages.packages/tanstack-query/package.json (1)
44-44: Consistent dependency upgrade of @tanstack/query-core
Bumped@tanstack/query-coreto^5.77.2to stay in sync with other TanStack dependencies.apps/content/package.json (1)
27-29: Consistent dependency upgrades for TanStack query integrations
Updated the following devDependencies to^5.77.2for alignment:
@tanstack/solid-query@tanstack/svelte-query@tanstack/vue-queryapps/content/docs/integrations/tanstack-start.md (1)
59-59: LGTM! Missing import added correctly.This import statement fixes the previously broken code example by providing the necessary
RPCLinkimport for the instantiation on line 63.playgrounds/solid-start/src/lib/orpc.server.ts (2)
5-7: Good defensive programming practice.The browser check prevents accidental import in client-side code, which would cause runtime errors since this module is designed specifically for server-side SSR optimization.
14-29:Details
✅ Verification successful
Verify global client management and memory implications.
The global client setup is appropriate for SSR optimization, but consider the following:
- The async context function is called per-request, which is correct
- The global client instance is shared across requests, which is intentional for performance
However, verify that this pattern doesn't lead to memory leaks or context bleeding between requests.
🏁 Script executed:
#!/bin/bash # Description: Check for similar global client patterns in the codebase # Expected: Find other examples of globalThis usage for SSR clients echo "Searching for globalThis client patterns..." rg -A 5 -B 5 'globalThis\.\$client' echo "Searching for createRouterClient usage patterns..." rg -A 10 'createRouterClient.*context.*async'Length of output: 9002
Global client management is correct
The
createRouterClientcall inorpc.server.tsmatches the documented SSR-optimization pattern:
- The async
contextcallback is invoked on each request, sourcing only the per-request headers.- No mutable state is preserved on the client between invocations, so there’s no risk of memory leaks or context bleeding.
No changes required.
playgrounds/solid-start/package.json (2)
21-21:Details
✅ Verification successful
Ensure vite-plugin-top-level-await is properly configured.
The new
vite-plugin-top-level-awaitdependency suggests support for top-level await syntax. Verify that this plugin is properly configured in the Vite configuration files.
🏁 Script executed:
#!/bin/bash # Description: Check if vite-plugin-top-level-await is configured in Vite config # Expected: Find configuration in vite.config or app.config files echo "Searching for Vite configuration files..." fd -e ts -e js "vite.config|app.config" . echo "Searching for top-level-await plugin usage..." rg -A 5 -B 5 "top-level-await"Length of output: 3925
Configuration Verified: vite-plugin-top-level-await
The
vite-plugin-top-level-awaitpackage is imported and invoked in the Vite config:
- File: playgrounds/solid-start/app.config.ts
import topLevelAwait from 'vite-plugin-top-level-await' export default defineConfig({ vite: { plugins: [ topLevelAwait(), // … ] } })No further action is needed.
18-18:Details
✅ Verification successful
Verify the TanStack Solid Query version compatibility.
The version bump to
^5.77.2should be verified for compatibility with the current codebase and other dependencies.
🌐 Web query:
What is the latest version of @tanstack/solid-query and are there any breaking changes in version 5.77.2?💡 Result:
The latest version of @tanstack/solid-query is 5.77.2, which was published one day ago according to the NPM package information[3].
Looking at the recent releases of TanStack Query, there's no specific information indicating breaking changes in version 5.77.2. The most recent releases documented are:
- Version 5.77.0 (May 24, 2025) which included:
- New feature: maxChunks
- Some chore changes related to removing ts-node and baseUrl from tsConfig
- Test cases and documentation fixes[1]
Prior to that was version 5.76.1 (May 13, 2025) which contained fixes for experimental_createQueryPersister[1].
TanStack Query v5 as a whole (compared to v4) did introduce several breaking changes which apply to all framework versions including Solid Query:
- API signature changes - only object format is now supported for useQuery and related functions
- Removal of isDataEqual in favor of structuralSharing
- Removal of custom loggers
- Updated browserslist for more modern, performant bundles
- Changes to hydration APIs (renaming Hydrate to HydrationBoundary, removal of useHydrate)[6][7][9]
For Solid Query specifically, there were framework-specific changes in v5, but there's no indication of new breaking changes specific to the 5.77.2 release based on the available search results.
If you're migrating from an earlier version of TanStack Query to v5.x, you should review the migration guides to understand the full scope of changes that might affect your application.
Citations:
- 1: https://github.com/tanstack/query/releases
- 2: https://tanstack.com/query
- 3: https://www.npmjs.com/package/@tanstack/solid-query
- 4: https://github.com/TanStack/query
- 5: https://tanstack.com/query/latest/docs/framework/solid/overview
- 6: https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5
- 7: https://tanstack.com/query/v5/docs/vue/guides/migrating-to-v5
- 8: https://tanstack.com
- 9: https://tanstack.com/query/v5/docs/framework/vue/guides/migrating-to-v5
- 10: https://security.snyk.io/package/npm/@tanstack%2Freact-query-devtools/5.77.2
🏁 Script executed:
#!/bin/bash rg "vite-plugin-top-level-await" -nLength of output: 487
🏁 Script executed:
#!/bin/bash sed -n '1,200p' playgrounds/solid-start/app.config.tsLength of output: 256
Approve dependency updates
- The
@tanstack/solid-queryentry inplaygrounds/solid-start/package.jsonis now^5.77.2, which is the latest published version and introduces no new breaking changes beyond the established v5 migration considerations.- The new dev dependency
vite-plugin-top-level-await(^1.5.0) is correctly imported and registered inplaygrounds/solid-start/app.config.tsunder the Vitepluginsarray.No further action required.
apps/content/docs/integrations/next.md (1)
97-97: LGTM! Consistent documentation fix.This import addition matches the same fix applied to the TanStack Start documentation, ensuring code examples are functional and consistent across all integration guides.
playgrounds/solid-start/src/app.tsx (1)
20-22: Good improvement to user experience.Adding a loading fallback to the Suspense component provides better UX during navigation and data loading states.
playgrounds/solid-start/src/routes/orpc-mutation.tsx (2)
7-7: Hook usage updated consistently with import.The usage is correctly updated to match the new import.
2-2:Details
✅ Verification successful
Verify API compatibility with TanStack Solid Query version.
The migration from
createMutationtouseMutationlooks correct, but please ensure this aligns with the version of@tanstack/solid-querybeing used in the project.
🏁 Script executed:
#!/bin/bash # Check the TanStack Solid Query version and verify the useMutation API exists cat playgrounds/solid-start/package.json | jq '.dependencies["@tanstack/solid-query"]' # Search for other usages of createMutation to ensure consistency rg "createMutation" --type ts --type tsxLength of output: 162
#!/bin/bash
Search all package.json files for @tanstack/solid-query to locate its version
rg '"@tanstack/solid-query"' -n --glob '*package.json'
Check the root package.json for the dependency or devDependency
cat package.json | jq '.dependencies["@tanstack/solid-query"], .devDependencies["@tanstack/solid-query"]'
Search for any remaining usages of createMutation in .ts/.tsx files
rg "createMutation" -g '.ts' -g '.tsx'
🏁 Script executed:
#!/bin/bash # 1. Locate all package.json files declaring @tanstack/solid-query and print the version rg '"@tanstack/solid-query"' -n --glob '*package.json' echo for pkg in $(rg '"@tanstack/solid-query"' -l --glob '*package.json'); do version=$(jq -r '.dependencies["@tanstack/solid-query"] // .devDependencies["@tanstack/solid-query"]' "$pkg") echo "Found in $pkg → @tanstack/solid-query@$version" done # 2. Search for any remaining createMutation usages in .ts/.tsx files rg "createMutation" -n --glob '*.ts' --glob '*.tsx'Length of output: 3516
🏁 Script executed:
#!/bin/bash # Verify that `useMutation` is implemented in the Solid Query source rg "useMutation" -n packages/solid-query/src # Specifically look for its export rg "export.*useMutation" -n packages/solid-query/srcLength of output: 553
API compatibility confirmed:
useMutationis available in Solid Query v5.77.2All instances of
@tanstack/solid-queryacross the repo are pinned to^5.77.2, and theuseMutationhook is already imported and exercised in the existing tests (e.g.packages/solid-query/src/procedure-utils.test-d.ts). No further action is needed.• Dependencies in
packages/solid-query,playgrounds/solid-start, andapps/contentall resolve to^5.77.2
• Tests successfully import and invokeuseMutation, demonstrating its export and functionalityplaygrounds/solid-start/src/routes/rpc/[...rest].ts (3)
5-5: Import reordering is acceptable.Moving the polyfill import after the onError import doesn't affect functionality.
26-26: Good addition for HTTP method completeness.Adding the HEAD export maintains consistency with other route handlers and follows REST conventions.
16-16:Details
❓ Verification inconclusive
Verify if removing authentication logic is intentional.
The context assignment was simplified to always provide a fixed user object, removing the conditional check for the Authorization header. This removes authentication logic from the demo.
Is this change intentional for simplifying the demo, or should authentication logic be preserved?
🏁 Script executed:
#!/bin/bash # Check if other route handlers have similar authentication patterns rg -A 5 -B 5 "Authorization.*header" --type tsLength of output: 48
🏁 Script executed:
#!/bin/bash # Inspect the beginning of the RPC handler to verify any removed auth logic sed -n '1,200p' playgrounds/solid-start/src/routes/rpc/\[\.\.\.rest\].ts # Search within this handler for any header-based auth checks rg -i "authorization" -A5 -B5 playgrounds/solid-start/src/routes/rpc/\[\.\.\.rest\].ts # Search all route handlers in this playground for auth-related patterns rg -i "auth" -A5 -B5 playgrounds/solid-start/src/routesLength of output: 3624
Confirm RPC handler authentication removal
The RPC endpoint (playgrounds/solid-start/src/routes/rpc/[...rest].ts) now always injects a fixeduserobject intocontext, whereas the API handler (playgrounds/solid-start/src/routes/api/[...rest].ts) still guards on theAuthorizationheader.• File:
playgrounds/solid-start/src/routes/rpc/[...rest].ts
• Line: context assignmentShould this unconditional user context be intentional for a simplified demo?
- If yes, please add a comment or README note explaining that auth is omitted here.
- If not, restore the header check (e.g.
request.headers.get('Authorization') ? { user: … } : {}) to align with the API routes.playgrounds/solid-start/app.config.ts (1)
2-10:Details
✅ Verification successful
Configuration looks correct for enabling top-level await support.
The addition of the
vite-plugin-top-level-awaitplugin properly enables top-level await syntax, which supports the SSR optimizations mentioned in the PR objectives.Please verify that the plugin dependency is properly installed:
🏁 Script executed:
#!/bin/bash # Check if vite-plugin-top-level-await is listed in dependencies cat playgrounds/solid-start/package.json | jq '.dependencies["vite-plugin-top-level-await"] // .devDependencies["vite-plugin-top-level-await"]'Length of output: 154
Plugin dependency verified and configuration approved
I confirmed that
vite-plugin-top-level-await@^1.5.0is listed inplaygrounds/solid-start/package.json. The Vite configuration is correct—ready to merge.playgrounds/solid-start/src/routes/orpc-query.tsx (1)
1-1: Hook import change looks correct.The change from
createInfiniteQuerytouseInfiniteQueryaligns with the TanStack Solid Query API updates.apps/content/docs/integrations/solid-start.md (4)
2-3: Documentation improvements look good.The updated title and description provide better clarity about the integration purpose.
29-29: Good addition of HEAD method support.Adding the HEAD method export ensures complete HTTP method coverage for the RPC handler.
47-63: Excellent client configuration guidance.The new Client section provides clear instructions for setting up RPCLink with SSR-compatible header forwarding using
getRequestEvent.
65-126: Comprehensive SSR optimization documentation.The new "Optimize SSR" section provides valuable guidance for reducing HTTP requests during SSR. The code examples are well-structured and follow best practices for server-side client reuse.
🧰 Tools
🪛 LanguageTool
[grammar] ~67-~67: The plural noun “details” cannot be used with the article “a”. Did you mean “a more detail” or “more details”?
Context: ...(/docs/best-practices/optimize-ssr) for a more details. ::: code-group ```ts [src/lib/orpc.t...(A_NNS)
playgrounds/solid-start/src/lib/orpc.ts (4)
1-3: Excellent SSR optimization setup.The conditional import ensures the server-side client is only loaded in the appropriate environment, preventing browser-side imports of server-only code.
12-14: Good global type declaration.The global variable declaration properly types the shared client instance for SSR optimization.
18-18: Smart dynamic header forwarding.Using
getRequestEvent()to extract headers dynamically enables proper request context forwarding in both SSR and client environments.
21-21: Well-implemented client fallback pattern.The fallback from global server client to client-side client ensures optimal performance during SSR while maintaining functionality in client-only scenarios.
| const queryClient = new QueryClient({ | ||
| defaultOptions: { | ||
| queries: { | ||
| experimental_prefetchInRender: true, | ||
| }, | ||
| }, | ||
| }) |
There was a problem hiding this comment.
Move QueryClient instantiation outside the component to prevent recreation on each render.
The QueryClient is being instantiated inside the App component, which means a new instance will be created on every render. This can lead to performance issues and loss of cached data.
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ experimental_prefetchInRender: true,
+ },
+ },
+})
+
export default function App() {
- const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- experimental_prefetchInRender: true,
- },
- },
- })
-
return (📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const queryClient = new QueryClient({ | |
| defaultOptions: { | |
| queries: { | |
| experimental_prefetchInRender: true, | |
| }, | |
| }, | |
| }) | |
| const queryClient = new QueryClient({ | |
| defaultOptions: { | |
| queries: { | |
| experimental_prefetchInRender: true, | |
| }, | |
| }, | |
| }) | |
| export default function App() { | |
| return ( | |
| /* ... */ |
🤖 Prompt for AI Agents
In playgrounds/solid-start/src/app.tsx around lines 7 to 13, the QueryClient is
instantiated inside the component, causing it to be recreated on every render.
To fix this, move the QueryClient instantiation outside the component function
so that the same instance is reused across renders, preserving cache and
improving performance.
1 participant
Summary by CodeRabbit