Skip to content

Latest commit

 

History

History
32 lines (23 loc) · 1.35 KB

README.md

File metadata and controls

32 lines (23 loc) · 1.35 KB
Raw

Vike + styled-components + grommet example

This is an example of integrating Vike with styled-components and grommet.

This was born out of the following discussions:

Special thanks to tdonhauser for initially digging into this.

Run it with:

pnpm install
pnpm run dev

Follow the initial commits in this repo one by one in order to understand how this is built:

  • First, an empty vike-react project was scaffolded using Bati.
  • Then, in order to be able to modify onRenderHtml(), which is encapsulated in vike-react, we copied it in this repository. This process is called "ejecting" onRenderHtml().
  • We then added styled-components to the project, which required to extend onRenderHtml().
  • Finally added grommet.

As you can see, server-side rendering works: the initial HTML delivered by onRenderHtml() contains the styles of the styled-components and grommet components and we don't experience any FOUC.