Add hydration error guide page #5532
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: tannerlinsley <tannerlinsley@gmail.com>
|
Cursor Agent can help with this pull request. Just |
Contributor
WalkthroughAdds documentation guides for handling hydration errors in React and Solid frameworks. Includes new navigation entries in the documentation config and two comprehensive guides explaining hydration mismatch causes, five mitigation strategies, code examples, and best practices for each framework. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution ↗ for commit 26e8e0a
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/start/config.json(2 hunks)docs/start/framework/react/guide/hydration-errors.md(1 hunks)docs/start/framework/solid/guide/hydration-errors.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/start/config.jsondocs/start/framework/solid/guide/hydration-errors.mddocs/start/framework/react/guide/hydration-errors.md
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/start/framework/solid/guide/hydration-errors.mddocs/start/framework/react/guide/hydration-errors.md
🔇 Additional comments (2)
docs/start/config.json (1)
104-107: Navigation entries properly structured and placed.Both React and Solid navigation entries follow the consistent naming convention and are positioned logically after Server Routes. The paths align with the new documentation files being added.
Also applies to: 197-200
docs/start/framework/solid/guide/hydration-errors.md (1)
105-106: Strategy 5 intentionally minimal for Solid.The "last resort" strategy appropriately omits Solid-specific suppression syntax (unlike React's
suppressHydrationWarning), correctly emphasizing that Solid doesn't offer a built-in suppression API and alternative strategies should be used instead.
| - **Use Selective SSR** when server HTML cannot be stable | ||
| - **Avoid blind suppression**; use `suppressHydrationWarning` sparingly | ||
|
|
||
| See also: [Execution Model](../execution-model.md), [Code Execution Patterns](../code-execution-patterns.md), [Selective SSR](../selective-ssr.md), [Server Functions](../server-functions.md) |
Contributor
There was a problem hiding this comment.
Fix doc link format to comply with coding guidelines.
The "See also" links use relative file paths (../execution-model.md) instead of doc-friendly links relative to the docs folder. Per the coding guidelines, use paths like ./guide/execution-model (without .md extension).
Apply this diff:
-See also: [Execution Model](../execution-model.md), [Code Execution Patterns](../code-execution-patterns.md), [Selective SSR](../selective-ssr.md), [Server Functions](../server-functions.md)
+See also: [Execution Model](./execution-model), [Code Execution Patterns](./code-execution-patterns), [Selective SSR](./selective-ssr), [Server Functions](./server-functions)📝 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.
Suggested change
| See also: [Execution Model](../execution-model.md), [Code Execution Patterns](../code-execution-patterns.md), [Selective SSR](../selective-ssr.md), [Server Functions](../server-functions.md) | |
| See also: [Execution Model](./execution-model), [Code Execution Patterns](./code-execution-patterns), [Selective SSR](./selective-ssr), [Server Functions](./server-functions) |
🤖 Prompt for AI Agents
In docs/start/framework/react/guide/hydration-errors.md around line 122, the
"See also" links use relative file paths with .md and parent directory traversal
(e.g. ../execution-model.md); update each link to the doc-friendly form without
the .md and using a docs-relative path (for example replace
../execution-model.md with ./guide/execution-model,
../code-execution-patterns.md with ./guide/code-execution-patterns,
../selective-ssr.md with ./guide/selective-ssr, and ../server-functions.md with
./guide/server-functions) so links conform to the coding guidelines.
| - **Use `<ClientOnly>`/`<NoHydration>`** for inherently dynamic UI | ||
| - **Use Selective SSR** when server HTML cannot be stable | ||
|
|
||
| See also: [Execution Model](../execution-model.md), [Code Execution Patterns](../code-execution-patterns.md), [Selective SSR](../selective-ssr.md), [Server Functions](../server-functions.md) |
Contributor
There was a problem hiding this comment.
Fix doc link format to comply with coding guidelines.
The "See also" links use relative file paths (../execution-model.md) instead of doc-friendly links relative to the docs folder. Per the coding guidelines, use paths like ./guide/execution-model (without .md extension). This should match the format applied to the React version of this guide.
Apply this diff:
-See also: [Execution Model](../execution-model.md), [Code Execution Patterns](../code-execution-patterns.md), [Selective SSR](../selective-ssr.md), [Server Functions](../server-functions.md)
+See also: [Execution Model](./execution-model), [Code Execution Patterns](./code-execution-patterns), [Selective SSR](./selective-ssr), [Server Functions](./server-functions)📝 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.
Suggested change
| See also: [Execution Model](../execution-model.md), [Code Execution Patterns](../code-execution-patterns.md), [Selective SSR](../selective-ssr.md), [Server Functions](../server-functions.md) | |
| See also: [Execution Model](./execution-model), [Code Execution Patterns](./code-execution-patterns), [Selective SSR](./selective-ssr), [Server Functions](./server-functions) |
🤖 Prompt for AI Agents
In docs/start/framework/solid/guide/hydration-errors.md around line 114, the
"See also" links use relative file paths with .md and parent directories; update
each link to the docs-friendly path format (no .md, paths relative to the docs
folder) — replace ../execution-model.md with ./guide/execution-model,
../code-execution-patterns.md with ./guide/code-execution-patterns,
../selective-ssr.md with ./guide/selective-ssr, and ../server-functions.md with
./guide/server-functions so the link format matches the React guide.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add new guide pages for React and Solid Start to address common hydration errors, especially those related to locale and time zone mismatches.
Summary by CodeRabbit