Svelte · Senior · Question 20 of 75

Why can `MediaQuery` or reading `localStorage` at component init cause problems with SSR?

✓Correct answer: The server can't know the value, so the server HTML may differ from the first client render and change on hydration
2They are not allowed in components
3They block rendering forever

Explanation

Prefer CSS for responsive layout, read browser-only APIs in effects, or store preferences in cookies so the server can use them.

Further reading

Test yourself

Take the Svelte · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.