mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-06 22:44:08 +08:00
113 lines
2.8 KiB
Plaintext
113 lines
2.8 KiB
Plaintext
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.
|
|
|
|
<Note label="readme">
|
|
You just need <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" pure 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 pure 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 pure 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>
|