Skip to content

Conversation

@birkskyum
Copy link
Member

@birkskyum birkskyum commented Oct 22, 2025

No description provided.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 22, 2025

Walkthrough

The fallback rendering for the top-level Dynamic component in Match.tsx was modified to conditionally render the PendingComponent only when not executing on the server and not in no-SSR mode. This prevents server-side fallback rendering and resolves hydration-related issues in no-SSR scenarios.

Changes

Cohort / File(s) Summary
Conditional fallback rendering in Solid Router
packages/solid-router/src/Match.tsx
Modified top-level Dynamic fallback to conditionally render PendingComponent based on server/no-SSR state; fallback remains undefined on server or when resolvedNoSsr is true

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

The change is localized to a single file but requires understanding the interaction between server-side rendering, no-SSR behavior, and hydration concerns. The conditional logic itself is straightforward, but verifying correctness in both SSR and non-SSR contexts adds review complexity.

Possibly related PRs

Suggested reviewers

  • schiller-manuel

Poem

🐰 A router once stumbled on server and stream,
Fallbacks appeared when they weren't in the dream,
But now with a gate, both clever and keen,
No hydration wars haunt the machine!
Conditional blessings, a patch most serene.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The pull request title "fix(solid-router): dev server hydration with pending component" is clearly and directly related to the main change in the changeset. The title accurately identifies the scope (solid-router package), the nature of the change (a fix), and the key aspects involved (dev server hydration and pending component). The summary confirms this is about fixing hydration-related issues by conditionally rendering the PendingComponent fallback, which aligns well with what the title conveys. The title is concise, follows conventional commit format, and provides sufficient clarity for a teammate reviewing the history.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix(solid-router)--dev-server-hydration-with-pending-component

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

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

@nx-cloud
Copy link

nx-cloud bot commented Oct 22, 2025

View your CI Pipeline Execution ↗ for commit 992bfe5

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded <1s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1s View ↗

☁️ Nx Cloud last updated this comment at 2025-10-22 17:55:14 UTC

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 22, 2025

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5585

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5585

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5585

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5585

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5585

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5585

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5585

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5585

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5585

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5585

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5585

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5585

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5585

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5585

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5585

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5585

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5585

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5585

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5585

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5585

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5585

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5585

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5585

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5585

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5585

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5585

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5585

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5585

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5585

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5585

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5585

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5585

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5585

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5585

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5585

commit: 992bfe5

@birkskyum birkskyum merged commit cc3999f into main Oct 22, 2025
5 of 6 checks passed
@birkskyum birkskyum deleted the fix(solid-router)--dev-server-hydration-with-pending-component branch October 22, 2025 17:57
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/solid-router/src/Match.tsx (1)

99-104: Clarify the comment to match the actual condition.

The comment states "on server when using no-ssr mode", but the condition router.isServer || resolvedNoSsr is broader and prevents the fallback in all server-side scenarios regardless of SSR mode. Update for clarity:

-            // Don't show fallback on server when using no-ssr mode to avoid hydration mismatch
+            // Don't show fallback on server or in no-SSR mode to avoid hydration mismatch
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eab8a99 and 992bfe5.

📒 Files selected for processing (1)
  • packages/solid-router/src/Match.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

  • packages/solid-router/src/Match.tsx
packages/{react-router,solid-router}/**

📄 CodeRabbit inference engine (AGENTS.md)

Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/

Files:

  • packages/solid-router/src/Match.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants