Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add SSR streaming API and stuff #448

Merged
merged 25 commits into from
Nov 19, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ coverage/
node_modules/
stylis.js
/demo/dist
/packages/site/build
/packages/site/build
flow-typed/
1 change: 1 addition & 0 deletions .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@ module.name_mapper='^\(emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(babel-plugin-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(emotion-theming\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(create-emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
28 changes: 26 additions & 2 deletions docs/ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,30 @@

Server-Side Rendering in emotion currently does not work with `extractStatic`. It's similar to [glamor's api](https://github.com/threepointone/glamor/blob/master/docs/server.md). For an example of emotion and next.js checkout the [with-emotion example in the next.js repo](https://github.com/zeit/next.js/tree/master/examples/with-emotion).

### renderStylesToString
This returns a string of html that inlines the critical css required right before it's used.

```jsx
import { renderToString } from 'react-dom/server'
import { renderStylesToString } from 'emotion-server'
import App from './App'

const html = renderStylesToString(renderToString(<App />))
```


### renderStylesToNodeStream
This returns [Node Stream Writable](https://nodejs.org/api/stream.html#stream_class_stream_writable) that can be used to insert critical css right before it's required. This can be used with [React's streaming API](https://reactjs.org/docs/react-dom-server.html#rendertonodestream).

```jsx
import { renderToNodeStream } from 'react-dom/server'
import { renderStylesToNodeStream } from 'emotion-server'
import App from './App'

const stream = renderToNodeStream(<App />).pipe(renderStylesToNodeStream())
```


### extractCritical
This returns an object with the properties `html`, `ids` and `css`. It removes unused rules that were created with emotion(it still includes rules that were inserted with `injectGlobal`).

Expand All @@ -11,12 +35,12 @@ import { extractCritical } from 'emotion-server'
import App from './App'


const { html, ids, css } = extractCritical(renderToString(<App/>))
const { html, ids, css } = extractCritical(renderToString(<App />))

```

#### hydrate
`hydrate` should be called on the client with the `ids` that `extractCritical` returns. If you don't call it then emotion will reinsert all the rules.
`hydrate` should be called on the client with the `ids` that `extractCritical` returns. If you don't call it then emotion will reinsert all the rules. `hydrate` is **only** required for `extractCritical`, **not** for `renderStylesToString` or `renderStylesToNodeStream`, hydration occurs automatically with `renderStylesToString` and `renderStylesToNodeStream`.

```jsx
import { hydrate } from 'emotion'
Expand Down
Loading