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.

Sign up for GitHub

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

feat(server): add extractCriticalToChunks #2334

Merged
merged 36 commits into from
May 7, 2021
Merged

feat(server): add extractCriticalToChunks #2334

Show file tree
Hide file tree
Changes from 31 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
d98b963
init
mnajdova Apr 6, 2021
f30982d
add some resets
mnajdova Apr 6, 2021
bba6038
updates
mnajdova Apr 9, 2021
55b8c0e
fixes
mnajdova Apr 9, 2021
aca34c9
cleanup
mnajdova Apr 9, 2021
afdcbe5
Update packages/server/types/create-instance.d.ts
mnajdova Apr 11, 2021
52521b4
Update packages/server/src/create-instance/extract-critical2.js
mnajdova Apr 11, 2021
c7ac36c
adress comments
mnajdova Apr 12, 2021
d7e7f8c
tests
mnajdova Apr 12, 2021
c39f42a
flow fixes
mnajdova Apr 12, 2021
ee704e1
Improve auto-rehydration for global styles when using extractCritical2
Andarist Apr 13, 2021
104d539
Fixed constructStyleTags to include all ids correctly
Andarist Apr 13, 2021
6b5489e
Merge branch 'main' into feat/extract-critical-2
mnajdova Apr 14, 2021
cdd74fd
Update packages/server/types/create-instance.d.ts
mnajdova Apr 14, 2021
d5dad23
Update packages/server/src/create-instance/construct-style-tags.js
mnajdova Apr 14, 2021
de5acc6
fix flow issues & update tests
mnajdova Apr 14, 2021
da4d7d9
Update packages/react/__tests__/rehydration.js
mnajdova Apr 19, 2021
f3b63f4
tweak test title
Andarist Apr 18, 2021
8345672
Merge branch 'main' into feat/extract-critical-2
mnajdova Apr 19, 2021
e69351c
renamed to extractCriticalToChunks
mnajdova Apr 19, 2021
70301b5
spacings
mnajdova Apr 19, 2021
584216a
spacing
mnajdova Apr 19, 2021
00ce87b
Fixed an issue with Global styles being reinjected when rehydrating
Andarist Apr 22, 2021
124cf3f
resolve comments
mnajdova Apr 22, 2021
88de62d
test updates
mnajdova Apr 22, 2021
26b6254
Fixed issue with global styles being sometimes owned by multiple shee…
Andarist Apr 26, 2021
c550bc1
Add tests for global rehydration
Andarist Apr 26, 2021
9596d32
add comment about why the data-attribute is reset in <Global/>
Andarist Apr 26, 2021
b51b8d1
fix flow errors
Andarist Apr 26, 2021
1ba5ab8
Revert merging layout effects in <Global/>
Andarist May 1, 2021
8d6fc69
Update packages/server/src/create-instance/extract-critical-to-chunks.js
emmatown May 3, 2021
634c863
Merge branch 'main' into feat/extract-critical-2
emmatown May 3, 2021
2025657
Merge branch 'main' into feat/extract-critical-2
Andarist May 5, 2021
eb70989
Merge branch 'main' into feat/extract-critical-2
emmatown May 7, 2021
9537994
Create tidy-feet-buy.md
emmatown May 7, 2021
2cc16da
Create chilly-clocks-jam.md
emmatown May 7, 2021
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
42 changes: 42 additions & 0 deletions docs/ssr.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,48 @@ You can also use the advanced integration, it requires more work but does not ha

### On server

#### When using `@emotion/react`

```jsx
import { CacheProvider } from '@emotion/react'
import { renderToString } from 'react-dom/server'
import createEmotionServer from '@emotion/server/create-instance'
import createCache from '@emotion/cache'

const key = 'custom'
const cache = createCache({ key })
const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache)

let element = (
<CacheProvider value={cache}>
<App />
</CacheProvider>
)

let { html, styles } = extractCriticalToChunks(renderToString(element))

res
.status(200)
.header('Content-Type', 'text/html')
.send(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My site</title>
${constructStyleTagsFromChunks({ html, styles })}
</head>
<body>
<div id="root">${html}</div>

<script src="./bundle.js"></script>
</body>
</html>`);
```

#### When using `@emotion/css`

```jsx
import { CacheProvider } from '@emotion/react'
import { renderToString } from 'react-dom/server'
Expand Down
Loading