SSR
Unistyles 3.0 is fully compatible with Next.js Server Side Rendering (SSR). We’re supporting both client and server components.
Usage
To use server-side rendered styles, create following client side component:
'use client'
import { PropsWithChildren } from 'react'import { useServerUnistyles } from 'react-native-unistyles/server'import { useServerInsertedHTML } from 'next/navigation'import './unistyles'
export const Style = ({ children }: PropsWithChildren) => { const unistyles = useServerUnistyles()
useServerInsertedHTML(() => unistyles)
return <>{children}</>}
With the component in place, make sure it wraps your body’s children:
import '../unistyles' import { Style } from '../Style'
export default function RootLayout({children,}: Readonly<{children: React.ReactNode;}>) {return ( <html lang="en"> <body> <Style> {children} </Style> </body> </html>);}
With this setup, we will ensure that Unistyles is initialized correctly and injects CSS on the server side.
Config (Optional)
useServerUnistyles
accepts an optional config object:
includeRNWStyles
– a boolean that enables or disables injecting React Native Web default CSS styles. Defaults totrue
.
To use server-side rendered styles, add the following code to your codebase:
import { getServerUnistyles, resetServerUnistyles } from 'react-native-unistyles/server'
export default class Document extends NextDocument { static async getInitialProps({ renderPage }: DocumentContext) { const page = await renderPage() const styles = getServerUnistyles()
resetServerUnistyles()
return { ...page, styles } }
And add the following use effect to your _app.tsx
import { hydrateServerUnistyles } from 'react-native-unistyles/server'
{/* JSX of your component */} useEffect(() => { hydrateServerUnistyles() }, [])
Config (Optional)
getServerUnistyles
accepts an optional config object:
includeRNWStyles
– a boolean that enables or disables injecting React Native Web default CSS styles. Defaults totrue
.