Skip to content
Unistyles

Server Side Rendering

Server side rendering
NextJS
SSR
2.0.0

Unistyles can render styles on the server-side, which is useful, for example, for SEO purposes.

Initial configuration

Configure your unistyles.ts file as it’s listed in the Getting started section.

Server side configuration

You just need to modify the __document.ts or __document.js file in your project’s root by importing unistyles.ts file.

 import '../unistyles'


export const getInitialProps = async ({ renderPage }) => {
    AppRegistry.registerComponent('Main', () => Main)


    const { getStyleElement } = AppRegistry.getApplication('Main')
    const page = await renderPage()
    const styles = [
        <style key="style-reset" dangerouslySetInnerHTML={{ __html: style }} />,
        getStyleElement()
    ]


    return { ...page, styles: React.Children.toArray(styles) }
}

Client side configuration

To setup the listeners and Unistyles bindings, simply repeat the process, but this time with _app.tsx file.

 import '../unistyles'


export const MyApp = ({ Component, pageProps }: SolitoAppProps) => {
    // your component
}

Some dynamic features like breakpoint are not available on the server. That’s why you need additional configuration with the isClient flag.

import React, { useEffect, useState } from 'react'
import { View, Text, ActivityIndicator } from 'react-native'
import { useStyles } from 'react-native-unistyles'


export const HomeScreen = () => {
    const { styles, breakpoint, theme } = useStyles(stylesheet)
    const [isClient, setIsClient] = useState(false)


    useEffect(() => {
        // this will run only on client side
        setIsClient(true)
    }, [])


    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                Welcome to Expo + Next.js + Unistyles 👋
            </Text>
            <Text>
                Current breakpoint: {isClient ? breakpoint : null}
            </Text>
            <Text>
                I like {theme.colors.barbie} color
            </Text>
            <View style={styles.linksContainer}>
                <TextLink href="/user/">
                    Click me 🦄
                </TextLink>
            </View>
            {!isClient && (
                <View style={styles.loader}>
                    <ActivityIndicator />
                </View>
            )}
        </View>
    )
}


const stylesheet = ...