static-react's Introduction

static-react

Zero-configuration CLI React static renderer

Usage

npm i -g static-react

static-react RootComponent.js > index.html

Static-react include babel presets and React – there is no need to install them separately

Examples

See the examples/ directory

Fetching Data

Use the getInitialProps static method to fetch data or get server-side props for things like CSS-in-JS libraries.

import React from 'react'
import fetch from 'isomorphic-fetch'

export default class extends React.Component {
  static getInitialProps = async () => {
    const data = await fetch('https://api.example.com/data')

    return {
      data
    }
  }

  render () {
    const { data } = this.props

    return (
      <html>
        <h1>Data</h1>
        <pre>
          {JSON.stringify(data, null, 2)}
        </pre>
      </html>
    )
  }
}

CSS-in-JS

Use the getInitialProps to pass side effects from CSS-in-JS libraries as props.

import React from 'react'
import { Box } from 'rebass'

export default class Root extends React.Component {
  static getInitialProps = async (app) => {
    const { ServerStyleSheet } = require('styled-components')
    const { renderToString } = require('react-dom/server')
    const sheet = new ServerStyleSheet()
    renderToString(
      sheet.collectStyles(app)
    )
    const css = sheet.getStyleTags()
    return { css }
  }

  static defaultProps = {
    css: ''
  }

  render () {
    const { css } = this.props

    return (
      <html>
        <head>
          ${css}
        </head>
        <body>
          <Box px={3} py={4}>
            Beep boop
          </Box>
        </body>
      </html>
    )
  }
}