React-native-web: Server rendering with Next.js

Created on 2 May 2017 · 7Comments · Source: necolas/react-native-web

Hey, I've managed to get things running with Next.js, but it seems server rendering doesn't include CSS.

Is there an API to grab the CSS for the page when server rendering? Like in this example with styled-components: https://github.com/zeit/next.js/blob/master/examples/with-styled-components/pages/_document.js

Thanks!

Source

scf4

Most helpful comment

Here's my solution below for anyone looking to integrate with Next.js, or if anyone has a better solution to propose:

pages/_document.js:

import Document, { Head, Main, NextScript } from 'next/document'
import { AppRegistry } from 'react-native-web';

export default class MyDocument extends Document {
  static async getInitialProps ({ renderPage }) {
    AppRegistry.registerComponent('Main', () => Main);
    const { stylesheet } = AppRegistry.getApplication('Main');
    const page = renderPage();
    const styles = <style dangerouslySetInnerHTML={{ __html: stylesheet }} />;
    return { ...page, styles };
  }

  render () {
    return (
      <html>
        <Head>
          <title>My page</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

scf4 on 2 May 2017

👍6

All 7 comments

Sidenote:

import { View, Text, StyleSheet } from 'react-native';

export default () =>
  <View style={{ backgroundColor: 'blue' }}>
    <Text style={{ fontFamily: 'Comic Sans MS'}}>
      testing
    </Text>
  </View>

The server-rendered version doesn't have a blue background. But it does if I set {{ background: 'blue' }} (afaik background isn't a valid RN prop), because it sets it as inline CSS on the div's style property.

Is this intended behaviour?

scf4 on 2 May 2017

Server-rendering guide: https://github.com/necolas/react-native-web/blob/master/docs/guides/getting-started.md#server-side-rendering

If there's an issue with the server-rendering styles, please open a separate issue with steps to reproduce. Thanks

necolas on 2 May 2017

Not sure how I missed that. Thanks Nicolas!

scf4 on 2 May 2017

Here's my solution below for anyone looking to integrate with Next.js, or if anyone has a better solution to propose:

pages/_document.js:

import Document, { Head, Main, NextScript } from 'next/document'
import { AppRegistry } from 'react-native-web';

export default class MyDocument extends Document {
  static async getInitialProps ({ renderPage }) {
    AppRegistry.registerComponent('Main', () => Main);
    const { stylesheet } = AppRegistry.getApplication('Main');
    const page = renderPage();
    const styles = <style dangerouslySetInnerHTML={{ __html: stylesheet }} />;
    return { ...page, styles };
  }

  render () {
    return (
      <html>
        <Head>
          <title>My page</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

scf4 on 2 May 2017

👍6

FYI, stylesheet is an HTML string

We could add an example to the Next.js repo

necolas on 2 May 2017

I've added a react-native-web example to the Next.js repository.