Skip to content

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, 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:

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.

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.

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.

layout.tsx
<html lang="en">
<html lang="en" suppressHydrationWarning>

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

layout.tsx
<html lang="en">
<html lang="en" className="dark">