ShadowJSShadowJSv1.0.0
[]previous and next page

Common mistakes

Common mistakes in the SSR, hydration and streaming guide.

For agentsUpdated
  • Browser-only code in a component body. window, localStorage, matchMedia throw on the server. Move them into onMount, which does not run there.
  • Different output on the first client render. Locale formatting, timezones, Math.random(), Date.now(), window.innerWidth. Compute them on both sides from the same input (pass them in the serialized data) or defer them to onMount.
  • Module-level request state. Signals and stores defined at module scope are shared by all requests.
  • Unkeyed resources that move. Give useResource a key when the server data must find its resource again.
  • Waterfalls. Child resources that depend on a parent's value cost one pass each. Fetch in parallel.
  • Serializing secrets. See the caution above.
  • Expecting comments on the client. The markers are a server-HTML detail. Do not query for them.
  • Forgetting the portal collector. A dialog open at render time is missing from the HTML unless the render gets portals and the document emits portals.html() (see "Portals on the server"). @shadow-js/dusk does both.