Breakpoint not hydrated after SSR render
lobor opened this issue · comments
Description
Breakpoint not hydrated
scroll-2024-01-23_15.25.38.webm
Steps to reproduce
Clone repo
pnpm i
pnpm dev
got to localhost:3000
in first load, breakpoint not apply, rezise with screen, breakpoint will hydrate when detect changed
Snack or a link to a repository (optional)
https://github.com/lobor/breakpoint-unistyle-repro
Unistyles version
2.1.0
React Native version
0.73.0
Platforms
SSR
Engine
Hermes
Architecture
Paper (old)
Hello 👋
Unistyles 2.0 has no custom CSS compiler, making it impossible to statically generate all styles. This includes the breakpoint feature, as concepts like window width do not exist on the server side. However, there is a plan to include this support in Unistyles 3.0.
There are some workarounds available, please check:
- This thread: #86 (reply in thread)
- Documentation: https://reactnativeunistyles.vercel.app/reference/server-side-rendering/
- Example repository with SSR: https://github.com/jpudysz/react-native-unistyles-ssr-example
You might also try experimentalCSSMediaQueries, which could assist with your case: https://reactnativeunistyles.vercel.app/reference/web-support/