import Layout from 'lib/components/layout'
import { Code, Link, Text, Spacer, Note } from 'components'
export const meta = {
title: 'Server Render',
description: 'description',
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.
You just need a SPA application?
It is recommended to skip this section.
Will using server-side rendering make my application lose the advantages of SPA? Maybe you can use the `hybrid render` application,
Read
the post from the Next.js team to learn more.
In addition, for server-side render and web applications,
we strongly recommend that you read this famous post
7-principles-of-rich-web-applications
from Guillermo Rauch.
### Next.js
In `next.js` framework, you need customization file `_document.js`,
please refer to Next.js document here
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: _document.jsx.
### 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()
const styles = CSSBaseLine.flush()
const html = ReactDOM.renderToStaticMarkup(
{ styles }
)
res.end('' + html)
}
```
export default ({ children }) => {children}