menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

The simple guide to server-side rendering a styled-components app

December 12, 2017 at 10:19am

The simple guide to server-side rendering a styled-components app

December 12, 2017 at 10:19am

@brotzky just published a great, concise guide on server-side rendering a React + styled-components app 😍

https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf

Do you do server-side rendering? If so, what's been the hardest part about it?


December 12, 2017 at 11:20am

I find it really irritating that most guides for SSR mostly use two webpack configs :/

  • reply
  • like

I wrote setups to have a single webpack process and config for both the server and client + bundle splitting from scratch mostly

like-fill
1
  • reply
  • like

But I’m hosting some of that code as a boilerplate now (no docs sorry) if anyone’s interested :) https://github.com/philpl/micro-gql-react-ssr-boilerplate

like-fill
1
  • reply
  • like

Been using S-C SSR within Nextjs. The hardest part has been the Next part :P, however they've been doing an awesome job upgrading it and I am enjoying it. Obviously, I used the setup listed within your docs. https://www.styled-components.com/docs/advanced#nextjs

like-fill
1
  • reply
  • like

Not 100% sure why you'd want the same webpack config for Node backends @phil

  • reply
  • like

On the frontend you bundle all your npm dependencies into the bundles, for a Node server you don't want to do that since they can just be required at runtime

  • reply
  • like

Thanks for the feedback @phil, really appreciate the suggestion and link to a resource that implements it! To be honest, I wasn't aware of that process and tried to keep this guide as simple as possible. I tried to keep the focus off Webpack and even thought of using Parcel after it came out. Including a from scratch solution might confuse a few people as it looks like you've got about 6 separate files to build that demo project.

Thanks for taking a look and I learned something new looking through your repo :)!

  • reply
  • like

there are legitimate reasons to want bundling on the server, but the odds on the preferred approach being the same as client-side aren't good

like-fill
2
  • reply
  • like

The next.js team has opted to use Babel instead of Webpack for server-side code. Relying more on Babel plugins instead of Webpack seems to be the trend nowadays.

  • reply
  • like

April 8, 2018 at 2:46pm

Hello thanks you for your guide. But it doesnt work for me... i cloned your repo to see and try but... Can i have help here ?

  • reply
  • like

April 16, 2018 at 1:40am

@adrien-ybanez, are there any specific errors? I think you're missing a .babelrc file in the root with the proper configs

  • reply
  • like