rsnext/examples/with-emotion-vanilla
Teo Stocco 789a665a03
Avoid page double render with emotion vanilla (#30541)
> Based on https://github.com/vercel/next.js/blob/v12.0.1/packages/next/server/render.tsx#L522-L532, this avoids the need for double page render. After investigation, the potential unneeded render has been introduced in the official [example](https://github.com/vercel/next.js/pull/20228/files#diff-3976da223aaf15067ecdd0734ca277ebf4629c46d62f89d732ab392752d3572dR6) but does not exist in the earlier proposed [solution](https://gist.github.com/colinhacks/c40519a6a050a99091862319151377ec). There might a reason (layered override?) for it but I am unable to find relevant explanation.

Original discussion in https://github.com/mantinedev/mantine/pull/348.

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
2022-01-05 17:48:12 +00:00
..
pages Avoid page double render with emotion vanilla (#30541) 2022-01-05 17:48:12 +00:00
shared feature/vanilla-emotion - add an example of vanilla emotion (#20228) 2021-01-22 12:16:50 +01:00
.babelrc feature/vanilla-emotion - add an example of vanilla emotion (#20228) 2021-01-22 12:16:50 +01:00
.gitignore feature/vanilla-emotion - add an example of vanilla emotion (#20228) 2021-01-22 12:16:50 +01:00
package.json Clean up examples package.json (#27121) 2021-07-12 19:58:03 +00:00
README.md docs: add 'Open in StackBlitz' buttons to various examples (#25853) 2021-06-08 20:45:02 +00:00

Emotion Vanilla Example

Extract and inline critical css with emotion, @emotion/server, @emotion/css

Preview

Preview the example live on StackBlitz:

Open in StackBlitz

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-emotion-vanilla with-emotion-vanilla-app
# or
yarn create next-app --example with-emotion-vanilla with-emotion-vanilla-app

Deploy it to the cloud with Vercel (Documentation).