diff --git a/src/routes/(5)guides/(6)data-fetching-patterns.mdx b/src/routes/(5)guides/(6)data-fetching-patterns.mdx index 8d9150417..383727e1a 100644 --- a/src/routes/(5)guides/(6)data-fetching-patterns.mdx +++ b/src/routes/(5)guides/(6)data-fetching-patterns.mdx @@ -196,7 +196,9 @@ function OrderHistory() { return ( }> orders.length) }}> - {(order) => } + + {(order) => } +
diff --git a/src/routes/(5)guides/(8)ssr-safe-code.mdx b/src/routes/(5)guides/(8)ssr-safe-code.mdx index 771e81b90..43c1a88b8 100644 --- a/src/routes/(5)guides/(8)ssr-safe-code.mdx +++ b/src/routes/(5)guides/(8)ssr-safe-code.mdx @@ -288,6 +288,26 @@ The compiler cannot see across components. A `Description` component that renders `

{props.children}

` and a parent that passes `
` children each compile to a valid template, and the browser still rebuilds the tree at runtime. When a hydration warning points at an element whose parent in the Elements panel is not the parent in the JSX, look for nesting that spans a component boundary and fix the outer element. +Table rows are the common case. +A `` whose rows come from a `` or a row component holds no `` in its own template, so the build passes, and the parser still moves the server's rows into a `` it adds. +The list then cannot update those rows after hydration: a removed row stays and a new row lands after the ``. +Development warns `TABLE_ROWS_WITHOUT_TBODY` once for each such table. +Write the `` yourself: + +```tsx +// Avoid: the parser wraps the server's rows in an implied +
+ {(order) => } +
; + +// Prefer: the is part of the template + + + {(order) => } + +
; +``` + ## Reading the hydration warnings Development prints one of five messages when the server's DOM and the client's expectations diverge.