Image for post
Image for post

The simple guide to server-side rendering React with styled-components

Dennis Brotzky
Dec 12, 2017 · 5 min read

The goal of this guide is to share the core principles of how to use styled-components in a server side rendered React application. The beauty of styled-components really shines through when you realize how seamless it is to setup in your application. Furthermore, styled-components are easy to integrate into existing applications that are using other methods of styling.

In this guide there are no additional libraries such as Redux, React Router, or concepts such as code splitting — let’s start with the basics.

You can view the final working example at: https://github.com/Jobeir/styled-components-server-side-rendering, discuss this post at https://spectrum.chat/thread/b95c9ef2-20cb-4bab-952f-fadd90add391

Getting started by setting up our React app

Application structure

First, let’s take a look at how our application will be structured for this guide. We’ll need to have all our dependencies and scripts withinpackage.json and our build step will be processed through webpack.config.js.

Beyond that, a single server.js file will handle our routing and serving of our React application. The client/ folder contains our the actual application in App.js, Html.js and index.js.

To get started, in a new empty folder of your choice, create an empty package.json by running:

npm init --yes or yarn init --yes

Then paste in the following scripts and dependencies shown below. The dependencies for this application include React, styled-components, Express, Wepback, and Babel.

Now that all our dependancies are accounted for and we’ve setup our scripts to start and build our project we can setup our React application.

1.src/client/App.js

App.js returns a div wrapping the 💅 emoji. It’s a very basic React component that we will be rendering into the browser.

2.src/client/index.js

index.js is the standard way to mount a React application into the DOM. We’re taking out App.js component and rendering it.

3.src/client/Html.js

What we have so far is a package.json that contains all our dependencies and scripts along with a basic React app in the src/client/ folder. This React app will be rendered as HTML through the Html.js file that returns a template string.

Creating the server

Image for post
Image for post

To render our app on the server we’ll need to setup express to handle the request and send back our HTML. With express already added, we can get right into creating server.

src/server.js

Configuring Webpack

This guide is focused on the very basics so our Webpack config is kept simple. We are using Webpack to build our React app in production mode and with Babel. There is a single entry point at src/server.js that will be ouput into dist/

Now we have enough to build and serve a server side rendered React application. We can run two commands and be ready.

First, run:

yarn build or npm build

Then to start application run:

yarn start or npm start

If it does not start you may need to add a .babelrc file in the root of your project.

Image for post
Image for post
Visiting http://localhost:3000 after a successful yarn build and subsequent yarn start

Adding styled-components

So far, so good. We’ve successfully created a React application that’s rendered on the server. We don’t have any third party libraries like React Router, Redux, and our Webpack config is straight to the point.

Next, let’s start styling our app with styled-components:

  1. src/client/App.js

Let’s create our first styled component. To create a styled component import styled and define your component.

Adding a styled component into our App

2. src/server.js

This is where the biggest changes occur. styled-components exposes ServerStyleSheet that will allow use to create a stylesheet from all the styled components in our <App />. This stylesheet gets passed into our Html template later on.

Adding 5 lines of code to server.js

3. src/client/Html.js

Adding styles as an argument into our Html function and inserting the ${styles} argument into our template string.

And that’s it! Let’s build and run our server side rendered React application with styled-components.

yarn build or npm build

Then to start application run:

yarn start or npm start

Image for post
Image for post

Conclusion

We’ve created a step-by-step guide of how to server side render a React application with styled-components. There are no bells or whistles around this guide because we wanted to focus on the core concepts. From here, you can use these principles in your existing apps or build on top of this guide to create a more complex app. There are other guides that will help you piece together how to add state management, routing, performance improvements, and more.


Don’t stop learning!

Thank you for following this guide and reading through to the end. Hopefully it helped you understand and get started with React/SSR and styled-components. If you know anyone that would benefit from this guide I would love if you recommended it to them!

If you’d like to see a larger code base that’s server side rendered using styled-components you can check out one of my projects, Jobeir, on Github. On top of that, the styled-components documentation is always a good place to go.

Who am I?

I’m the cofounder of Narative. We merge best practices in design, engineering and strategy to create narratives that empower the best companies in the world. You can contact us for work inquiries or visit our careers to join our team.

👋

💅 styled-components

Visual primitives for the component age.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store