import Layout from 'lib/components/layout'
import { Code, Link, Text, Spacer, Note } from 'components'

export const meta = {
  title: 'Server Render',
  group: 'getting-started',
  index: 15,
}


## Server Render

### ZEIT-UI React on the Server

All Components of `@zeit-ui/react` are compatible with **Server Render**. In fact, the document you see now is rendered by the server.

<Note label="readme">
  You just need <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" underline>a SPA application</Link>?
  It is recommended to skip this section.
</Note>

<Spacer y={.5} />

Will using server-side rendering make my application lose the advantages of SPA? Maybe you can use the `hybrid render` application,
Read <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
the post from the Next.js team</Link> to learn more.

<Text>In addition, for <Text b>server-side render</Text> and web applications,
we strongly recommend that you read this famous post
<Link color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
  7-principles-of-rich-web-applications
</Link> from <Text em>Guillermo Rauch</Text>.
</Text>

<Spacer y={2.5} />

### Next.js

In `next.js` framework, you need customization file `_document.js`,
please refer to <Link href="https://nextjs.org/docs/advanced-features/custom-document" rel="nofollow">Next.js document here</Link>
to create file `_document.js`.

Then we add the following codes to the file:

```js
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { CSSBaseline } from '@zeit-ui/react'

class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const styles = CSSBaseline.flush()

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {styles}
        </>
      )
    }
  }

  render() { ... }
}
```

Here's an examples that might help you: <Link href="https://github.com/unix/unix.bio/blob/template/pages/_document.jsx" rel="nofollow">_document.jsx</Link>.

<Spacer y={3} />

### Custom Server

In the custom server, also get the style set from function `CSSBaseLine.flush`.

```js
import React from 'react'
import ReactDOM from 'react-dom/server'
import { CSSBaseLine } from 'zeit-ui/react'
import App from './app'

export default (req, res) => {
  const app = ReactDOM.renderToString(<App />)
  const styles = CSSBaseLine.flush()
  const html = ReactDOM.renderToStaticMarkup(<html>
    <head>{ styles }</head>
    <body>
      <div id="root" dangerouslySetInnerHTML={{__html: app}} />
    </body>
  </html>)
  res.end('<!doctype html>' + html)
}
```

















export default ({ children }) => <Layout meta={meta}>{children}</Layout>
