react-ssr-critical-styles
Important
Relies on PR https://github.com/webpack/style-loader/pull/159 in style-loader
.
Or use temp npm package of forked version - @humblespark/style-loader
style-loader
can't work server side the same way it does client side, because there is no global document / object
to write styles to. to collect critical styles
on server, we need style-loader
to expose the generated css, for us
to bubble up to a higher order component for initial server side render. we need style-loader
to expose locals
as css-loader
does.
Higher order components to use webpack style loader server side for React.
API
addCriticalStyles
- hocaddCriticalStyles(styles)(App)
RemoveCriticalStyles
- optional component for clientGatherCriticalStyles
- wrap server components to gather critical stylesstringifyStyles
- helper to join & minify styles to put in head
Usage
server.js (gathers styles from components to render inline in head)
; ... let criticalStyles = ; const content = ; resstatus200; ...
client.js (optionally removes styles once style-loader
kicks in on client. using this is optional.)
; ... ; ...
AppComponent.js (addCriticalStyles hoc uses context to bubble up through component tree.)
;;; { return <div className=localsApp /> } stylesApp;