Skip to content
react-native-unistyles

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

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

Style.tsx
'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:

layout.tsx
 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.