React server side rendering (SSR)

One of the most appreciated features of React is the possibility to render the markup of one or more components directly to HTML from the server side. This characteristic opens up a lot of interesting opportunities like the possibility to generate static websites using React as a template engine, or the possibility to build "Universal" JavaScript applications.

10 resources available

Building a Blog with Next.js

Next.js is an awesome new framework for building universal React applications. In simple terms, that means you can use React to render templates on the server, as well frontend components the way you're most likely used to. The advantages of this are numerous (shared components, faster rendering, great [continue]

Tutorial by Zach Sherman

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

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 [continue]

Article by Dennis Brotzky

Tutorial: SSR Split Testing and Analytics with React, Redux, and Next.js

In this tutorial we will start with an empty Node.js project and walk through the process of building simple split-testing functionality with Next.js, Redux, and seamless analytics by creating custom Redux analytics middleware. This serves dual-purposes. As an introduction to Redux and Next.js, as well [continue]

Tutorial by Patrick Lee Scott

Next.js Crash Course - Server Side React

In this video we will talk about Next.js which is a framework to render React on the server. We will look at setup and build a simple application that pulls Bitcoin pricing from an API and displays it in the app. [continue]

Video Tutorial by Traversy Media

Adding state management with Redux in a CRA + SSR project

This tutorial will explain you how to initialize your Redux store on the server, then pick it up and hydrate it on the client. [continue]

Tutorial by Andrei Duca

Upgrading a create-react-app project to a SSR + code splitting setup

The default CRA setup can be OK for small projects, it's not always enough for larger, more complex applications. Luckily, we can improve things, even without ejecting. Let's try to do this step by step. This is what we'll cover: Server-side rendering, Code splitting with react-loadable, Code splitting [continue]

Tutorial by Andrei Duca

Universal JavaScript Web Applications with React

Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming true! In this talk, I am going to discuss Universal (a.k.a. Isomorphic) JS [continue]

Video Talk by Luciano Mammino

How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks)

Server-side rendering can help improve performance, but you need to make sure you're doing it right. In this episode we'll set compare the page load of a regular and server-side rendered React app. We'll use the Chrome DevTools to get a good visualization of what's going on, but then switch to Webpagetest [continue]

Video by David East

Client Side vs. Server Sider Rendering

In this video, Jason Rosso dives into the differences between client side and server side rendering, the processes of each, and cases in which one will may be beneficial over the other. Jason also discusses how both may be possible within the popular while using React, and an exciting new framework that [continue]

Video Talk by Jason Rosso

Demystifying server-side rendering in React

Let's have a closer look at the feature that allows you to build universal applications with React Server-Side Rendering  —  SSR from here on  —  is the ability of a front-end framework to render markup while running on a back-end system. Applications that have the ability to render both on the server [continue]

Article by Alex Moldovan