Skip to content

Commit

Permalink
feat(ssr): improve ssr hydration mismatch checks
Browse files Browse the repository at this point in the history 
- Include the actual element in the warning message
- Also warn class/style/attribute mismatches

Note: class/style/attribute mismatches are check-only and will not be
rectified.

close #5063
  • Loading branch information
@yyx990803
yyx990803 committed May 19, 2022
1 parent e8ceac7 commit 5ad12ab
Show file tree
Hide file tree
Showing 2 changed files with 185 additions and 54 deletions.
60 changes: 56 additions & 4 deletions packages/runtime-core/__tests__/hydration.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -902,7 +902,7 @@ describe('SSR hydration', () => {

test('force hydrate select option with non-string value bindings', () => {
const { container } = mountWithHydration(
'<select><option :value="true">ok</option></select>',
'<select><option value="true">ok</option></select>',
() =>
h('select', [
// hoisted because bound value is a constant...
Expand All @@ -924,7 +924,7 @@ describe('SSR hydration', () => {
h('div', 'bar')
)
expect(container.innerHTML).toBe('<div>bar</div>')
expect(`Hydration text content mismatch in <div>`).toHaveBeenWarned()
expect(`Hydration text content mismatch`).toHaveBeenWarned()
})

test('not enough children', () => {
Expand All @@ -934,7 +934,7 @@ describe('SSR hydration', () => {
expect(container.innerHTML).toBe(
'<div><span>foo</span><span>bar</span></div>'
)
expect(`Hydration children mismatch in <div>`).toHaveBeenWarned()
expect(`Hydration children mismatch`).toHaveBeenWarned()
})

test('too many children', () => {
Expand All @@ -943,7 +943,7 @@ describe('SSR hydration', () => {
() => h('div', [h('span', 'foo')])
)
expect(container.innerHTML).toBe('<div><span>foo</span></div>')
expect(`Hydration children mismatch in <div>`).toHaveBeenWarned()
expect(`Hydration children mismatch`).toHaveBeenWarned()
})

test('complete mismatch', () => {
Expand Down Expand Up @@ -1001,5 +1001,57 @@ describe('SSR hydration', () => {
expect(teleportContainer.innerHTML).toBe(`<span>value</span>`)
expect(`Hydration children mismatch`).toHaveBeenWarned()
})

test('class mismatch', () => {
mountWithHydration(`<div class="foo bar"></div>`, () =>
h('div', { class: ['foo', 'bar'] })
)
mountWithHydration(`<div class="foo bar"></div>`, () =>
h('div', { class: { foo: true, bar: true } })
)
mountWithHydration(`<div class="foo bar"></div>`, () =>
h('div', { class: 'foo bar' })
)
expect(`Hydration class mismatch`).not.toHaveBeenWarned()
mountWithHydration(`<div class="foo bar"></div>`, () =>
h('div', { class: 'foo' })
)
expect(`Hydration class mismatch`).toHaveBeenWarned()
})

test('style mismatch', () => {
mountWithHydration(`<div style="color:red;"></div>`, () =>
h('div', { style: { color: 'red' } })
)
mountWithHydration(`<div style="color:red;"></div>`, () =>
h('div', { style: `color:red;` })
)
expect(`Hydration style mismatch`).not.toHaveBeenWarned()
mountWithHydration(`<div style="color:red;"></div>`, () =>
h('div', { style: { color: 'green' } })
)
expect(`Hydration style mismatch`).toHaveBeenWarned()
})

test('attr mismatch', () => {
mountWithHydration(`<div id="foo"></div>`, () => h('div', { id: 'foo' }))
mountWithHydration(`<div spellcheck></div>`, () =>
h('div', { spellcheck: '' })
)
// boolean
mountWithHydration(`<select multiple></div>`, () =>
h('select', { multiple: true })
)
mountWithHydration(`<select multiple></div>`, () =>
h('select', { multiple: 'multiple' })
)
expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()

mountWithHydration(`<div></div>`, () => h('div', { id: 'foo' }))
expect(`Hydration attribute mismatch`).toHaveBeenWarned()

mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
})
})
})
179 changes: 129 additions & 50 deletions packages/runtime-core/src/hydration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,20 @@ import { flushPostFlushCbs } from './scheduler'
import { ComponentInternalInstance } from './component'
import { invokeDirectiveHook } from './directives'
import { warn } from './warning'
import { PatchFlags, ShapeFlags, isReservedProp, isOn } from '@vue/shared'
import {
PatchFlags,
ShapeFlags,
isReservedProp,
isOn,
normalizeClass,
normalizeStyle,
stringifyStyle,
isBooleanAttr,
isString,
includeBooleanAttr,
isKnownHtmlAttr,
isKnownSvgAttr
} from '@vue/shared'
import { RendererInternals } from './renderer'
import { setRef } from './rendererTemplateRef'
import {
Expand Down Expand Up @@ -116,9 +129,12 @@ export function createHydrationFunctions(
hasMismatch = true
__DEV__ &&
warn(
`Hydration text mismatch:` +
`\n- Client: ${JSON.stringify((node as Text).data)}` +
`\n- Server: ${JSON.stringify(vnode.children)}`
`Hydration text mismatch in`,
node.parentNode,
`\n - rendered on server: ${JSON.stringify(vnode.children)}` +
`\n - expected on client: ${JSON.stringify(
(node as Text).data
)}`
)
;(node as Text).data = vnode.children as string
}
Expand Down Expand Up @@ -292,14 +308,65 @@ export function createHydrationFunctions(
if (dirs) {
invokeDirectiveHook(vnode, null, parentComponent, 'created')
}

// children
if (
shapeFlag & ShapeFlags.ARRAY_CHILDREN &&
// skip if element has innerHTML / textContent
!(props && (props.innerHTML || props.textContent))
) {
let next = hydrateChildren(
el.firstChild,
vnode,
el,
parentComponent,
parentSuspense,
slotScopeIds,
optimized
)
let hasWarned = false
while (next) {
hasMismatch = true
if (__DEV__ && !hasWarned) {
warn(
`Hydration children mismatch on`,
el,
`\nServer rendered element contains more child nodes than client vdom.`
)
hasWarned = true
}
// The SSRed DOM contains more nodes than it should. Remove them.
const cur = next
next = next.nextSibling
remove(cur)
}
} else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
if (el.textContent !== vnode.children) {
hasMismatch = true
__DEV__ &&
warn(
`Hydration text content mismatch on`,
el,
`\n - rendered on server: ${vnode.children as string}` +
`\n - expected on client: ${el.textContent}`
)
el.textContent = vnode.children as string
}
}

// props
if (props) {
if (
__DEV__ ||
forcePatchValue ||
!optimized ||
patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.HYDRATE_EVENTS)
) {
for (const key in props) {
// check hydration mismatch
if (__DEV__ && propHasMismatch(el, key, props[key])) {
hasMismatch = true
}
if (
(forcePatchValue && key.endsWith('value')) ||
(isOn(key) && !isReservedProp(key))
Expand Down Expand Up @@ -343,50 +410,6 @@ export function createHydrationFunctions(
dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
}, parentSuspense)
}
// children
if (
shapeFlag & ShapeFlags.ARRAY_CHILDREN &&
// skip if element has innerHTML / textContent
!(props && (props.innerHTML || props.textContent))
) {
let next = hydrateChildren(
el.firstChild,
vnode,
el,
parentComponent,
parentSuspense,
slotScopeIds,
optimized
)
let hasWarned = false
while (next) {
hasMismatch = true
if (__DEV__ && !hasWarned) {
warn(
`Hydration children mismatch in <${vnode.type as string}>: ` +
`server rendered element contains more child nodes than client vdom.`
)
hasWarned = true
}
// The SSRed DOM contains more nodes than it should. Remove them.
const cur = next
next = next.nextSibling
remove(cur)
}
} else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
if (el.textContent !== vnode.children) {
hasMismatch = true
__DEV__ &&
warn(
`Hydration text content mismatch in <${
vnode.type as string
}>:\n` +
`- Client: ${el.textContent}\n` +
`- Server: ${vnode.children as string}`
)
el.textContent = vnode.children as string
}
}
}
return el.nextSibling
}
Expand Down Expand Up @@ -423,8 +446,9 @@ export function createHydrationFunctions(
hasMismatch = true
if (__DEV__ && !hasWarned) {
warn(
`Hydration children mismatch in <${container.tagName.toLowerCase()}>: ` +
`server rendered element contains fewer child nodes than client vdom.`
`Hydration children mismatch on`,
container,
`\nServer rendered element contains fewer child nodes than client vdom.`
)
hasWarned = true
}
Expand Down Expand Up @@ -554,3 +578,58 @@ export function createHydrationFunctions(

return [hydrate, hydrateNode] as const
}

/**
* Dev only
*/
function propHasMismatch(el: Element, key: string, clientValue: any): boolean {
let mismatchType: string | undefined
let mismatchKey: string | undefined
let actual: any
let expected: any
if (key === 'class') {
actual = el.className
expected = normalizeClass(clientValue)
if (actual !== expected) {
mismatchType = mismatchKey = `class`
}
} else if (key === 'style') {
actual = el.getAttribute('style')
expected = isString(clientValue)
? clientValue
: stringifyStyle(normalizeStyle(clientValue))
if (actual !== expected) {
mismatchType = mismatchKey = 'style'
}
} else if (
(el instanceof SVGElement && isKnownSvgAttr(key)) ||
(el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
) {
actual = el.hasAttribute(key) && el.getAttribute(key)
expected = isBooleanAttr(key)
? includeBooleanAttr(clientValue)
? ''
: false
: String(clientValue)
if (actual !== expected) {
mismatchType = `attribute`
mismatchKey = key
}
}

if (mismatchType) {
const format = (v: any) =>
v === false ? `(not rendered)` : `${mismatchKey}="${v}"`
warn(
`Hydration ${mismatchType} mismatch on`,
el,
`\n - rendered on server: ${format(actual)}` +
`\n - expected on client: ${format(expected)}` +
`\n Note: this mismatch is check-only. The DOM will not be rectified ` +
`in production due to performance overhead.` +
`\n You should fix the source of the mismatch.`
)
return true
}
return false
}

0 comments on commit 5ad12ab

Please sign in to comment.