docs: hydration best practice #32746
Conversation
|
|
|
|
||
| Vue will log hydration mismatch warnings in the browser console during development: | ||
|
|
||
|  |
There was a problem hiding this comment.
oops... guess i have to open a pr to nuxt.com first...
|
Warning Rate limit exceeded@huang-julien has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 9 minutes and 40 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughA new documentation guide titled "Nuxt and hydration" has been introduced. This guide explains the significance of addressing hydration issues in Nuxt applications, details the negative consequences of hydration mismatches, and describes methods for detecting such issues. It lists common causes of hydration problems, provides illustrative code examples, and recommends solutions using Nuxt-specific composables and components. The document concludes with a summary of best practices and references to further reading. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes ✨ Finishing Touches🧪 Generate 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. 🪧 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 (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
docs/2.guide/5.best-practices/hydration.md (3)
4-4: Add missing verb in the description front-matterThe sentence is missing the verb “is”, which reads a little jarring in the docs header.
-description: Why fixing hydration issues important +description: Why fixing hydration issues is important
15-15: Insert a comma after the subordinate clauseA short pause helps readability and resolves the LanguageTool warning.
- - **Increased time to interactive**: Hydration errors force Vue to re-render the entire component tree which will increase the time for your Nuxt app to become interactive + - **Increased time to interactive**: Hydration errors force Vue to re-render the entire component tree, which will increase the time for your Nuxt app to become interactive
186-188: Separate the directive block with a newline to avoid “loose punctuation”The two spaces before
::tipare interpreted as punctuation noise by the linter and may also break MD-enhanced parsers. A clean newline solves both problems.-Avoid side effects in setup: Move browser-dependent code to `onMounted` - -::tip +Avoid side effects in setup: Move browser-dependent code to `onMounted` + + +::tip
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
docs/2.guide/5.best-practices/image.pngis excluded by!**/*.png
📒 Files selected for processing (1)
docs/2.guide/5.best-practices/hydration.md(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Tofandel
PR: nuxt/nuxt#26468
File: packages/nuxt/src/components/runtime/client-delayed-component.ts:62-62
Timestamp: 2024-11-05T20:04:39.622Z
Learning: In Vue components, when typing the `hydrate` prop for hydration strategies like `hydrateOnInteraction`, use `type: null as PropType<Arguments<typeof hydrateOnInteraction>[0]>` to get the type directly from Vue's hydration methods. Also, remember that `HTMLElementEventMap` is not a type but an object; use `keyof HTMLElementEventMap` when defining prop types for events.
docs/2.guide/5.best-practices/hydration.md (2)
Learnt from: Tofandel
PR: #26468
File: packages/nuxt/src/components/runtime/client-delayed-component.ts:62-62
Timestamp: 2024-11-05T20:04:39.622Z
Learning: In Vue components, when typing the hydrate prop for hydration strategies like hydrateOnInteraction, use type: null as PropType<Arguments<typeof hydrateOnInteraction>[0]> to get the type directly from Vue's hydration methods. Also, remember that HTMLElementEventMap is not a type but an object; use keyof HTMLElementEventMap when defining prop types for events.
Learnt from: huang-julien
PR: #29366
File: packages/nuxt/src/app/components/nuxt-root.vue:16-19
Timestamp: 2024-12-12T12:36:34.871Z
Learning: In packages/nuxt/src/app/components/nuxt-root.vue, when optimizing bundle size by conditionally importing components based on route metadata, prefer using inline conditional imports like:
const IsolatedPage = route?.meta?.isolate ? defineAsyncComponent(() => import('#build/isolated-page.mjs')) : nullinstead of wrapping the import in a computed property or importing the component unconditionally.
🪛 LanguageTool
docs/2.guide/5.best-practices/hydration.md
[uncategorized] ~15-~15: Possible missing comma found.
Context: ...e Vue to re-render the entire component tree which will increase the time for your N...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~185-~185: Loose punctuation mark.
Context: ... browser-dependent code to onMounted ::tip You can read the [Vue documentation...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~187-~187: Loose punctuation mark.
Context: ...or a better understanding of hydration. ::
(UNLIKELY_OPENING_PUNCTUATION)
⏰ 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). (2)
- GitHub Check: lint-docs
- GitHub Check: lint-docs
🔇 Additional comments (1)
docs/2.guide/5.best-practices/hydration.md (1)
30-30: Verify thatimage.pngis committed and has the right pathThe document references
image.png, but the file is not part of this PR. Broken image links render as empty blocks in prod docs.Would you confirm that the screenshot is present in the repository’s static assets (e.g.
docs/public/images/)? If not, please include it or adjust the path.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
docs/2.guide/5.best-practices/hydration.md (5)
4-4: Add missing verb in front-matter descriptionThe sentence in the front-matter lacks the verb “is”, which slightly harms readability.
-description: Why fixing hydration issues important +description: Why fixing hydration issues is important
15-16: Insert comma after non-restrictive clauseAdd a comma after “component tree” to separate the non-restrictive clause and improve flow.
-...component tree which will increase the time for your Nuxt app... +...component tree, which will increase the time for your Nuxt app...
24-31: Consider adding explicit alt text for accessibilityThe image has an alt that repeats the filename. Replace it with a concise description of what the console warning shows so screen-reader users get meaningful context.
- +
121-122: Grammar tweak in heading“once hydration completed” is missing “has”. Also consider wording “after hydration has completed” for clarity.
-**Solution**: Initialize libraries once hydration completed: +**Solution**: Initialise libraries after hydration has completed:
186-188: Minor admonition formattingMany markdown parsers require a blank line before
::tipfor proper block rendering; otherwise, it may be treated as plain text.-4. **Avoid side effects in setup**: Move browser-dependent code to `onMounted` - -::tip +4. **Avoid side effects in setup**: Move browser-dependent code to `onMounted` + + +::tip
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/2.guide/5.best-practices/hydration.md(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Tofandel
PR: nuxt/nuxt#26468
File: packages/nuxt/src/components/runtime/client-delayed-component.ts:62-62
Timestamp: 2024-11-05T20:04:39.622Z
Learning: In Vue components, when typing the `hydrate` prop for hydration strategies like `hydrateOnInteraction`, use `type: null as PropType<Arguments<typeof hydrateOnInteraction>[0]>` to get the type directly from Vue's hydration methods. Also, remember that `HTMLElementEventMap` is not a type but an object; use `keyof HTMLElementEventMap` when defining prop types for events.
docs/2.guide/5.best-practices/hydration.md (2)
Learnt from: Tofandel
PR: #26468
File: packages/nuxt/src/components/runtime/client-delayed-component.ts:62-62
Timestamp: 2024-11-05T20:04:39.622Z
Learning: In Vue components, when typing the hydrate prop for hydration strategies like hydrateOnInteraction, use type: null as PropType<Arguments<typeof hydrateOnInteraction>[0]> to get the type directly from Vue's hydration methods. Also, remember that HTMLElementEventMap is not a type but an object; use keyof HTMLElementEventMap when defining prop types for events.
Learnt from: huang-julien
PR: #29366
File: packages/nuxt/src/app/components/nuxt-root.vue:16-19
Timestamp: 2024-12-12T12:36:34.871Z
Learning: In packages/nuxt/src/app/components/nuxt-root.vue, when optimizing bundle size by conditionally importing components based on route metadata, prefer using inline conditional imports like:
const IsolatedPage = route?.meta?.isolate ? defineAsyncComponent(() => import('#build/isolated-page.mjs')) : nullinstead of wrapping the import in a computed property or importing the component unconditionally.
🪛 LanguageTool
docs/2.guide/5.best-practices/hydration.md
[uncategorized] ~15-~15: Possible missing comma found.
Context: ...e Vue to re-render the entire component tree which will increase the time for your N...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~185-~185: Loose punctuation mark.
Context: ... browser-dependent code to onMounted ::tip You can read the [Vue documentation...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~187-~187: Loose punctuation mark.
Context: ...or a better understanding of hydration. ::
(UNLIKELY_OPENING_PUNCTUATION)
⏰ 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). (2)
- GitHub Check: lint-docs
- GitHub Check: lint-docs
🔗 Linked issue
📚 Description
An additionnal best practice page about hydration