This is a quick POC to demonstrate server-side-rendering of styled-components.
Currently there are two changes to support this:
-
app/javascript/packs/server_renderingis modified to return both the rendered component and the style tag containing the styles for that component. -
app/assets/javascripts/application.jsgrabs the style tag and moves it to the document<head>, otherwise it will be discarded by the hydrated component.
After installation of gems and packages.
- Start Rails Server
rails s-
Visit
http://localhost:3000/examplesand create a new 'Example'. -
Navigate to:
http://localhost:3000/examples/1with or without JavaScript enabled. The styles are rendered by styled-components.