SSR

SSR using Unistyles 3.0

Unistyles 3.0 is fully compatible with Next.js Server Side Rendering (SSR). We’re supporting both client and server components.

Usage

App router
Pages router

To use server-side rendered styles, create the following client-side component:

'use client'

import { PropsWithChildren, useRef } from 'react'
import { useServerUnistyles } from 'react-native-unistyles/server'
import { useServerInsertedHTML } from 'next/navigation'
import './unistyles'

export const Style = ({ children }: PropsWithChildren) => {
    const isServerInserted = useRef(false)
    const unistyles = useServerUnistyles()

    useServerInsertedHTML(() => {
        if (isServerInserted.current) {
            return null
        }

        isServerInserted.current = true

        return 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 to true.

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 to true.

Troubleshooting

Hydration error

If you’re not using adaptive themes, you might encounter hydration error on your root html element. This is because unistyles is adding a className to it based on the current theme.

To fix this simply add suppressHydrationWarning to your root html element.

<html lang="en">
<html lang="en" suppressHydrationWarning>

Or you can directly add the className to your root html element.

<html lang="en">
<html lang="en" className="dark">