DevTonic

Learning Server-Side Rendering (SSR) in 15 Days

Introduction

Server-Side Rendering (SSR) is a technique used in web development to render content on the server rather than in the browser. This technique improves the initial loading time and SEO performance of web applications. In this 15-day journey, we'll break down the steps to understand and implement SSR in modern frameworks like React.

Day 1: Understanding SSR Basics

What is SSR?

SSR is the process of rendering HTML on the server instead of in the browser. This means that when a user requests a page, the server sends a fully rendered HTML page, reducing the need for the browser to load and render content on its own.

Why Use SSR?

Improved SEO: Search engines can crawl pre-rendered content.
Faster initial page load: The user receives a fully rendered page.
Better performance: Useful for content-heavy applications.

Basic Example

Here’s a simple SSR setup using Node.js and Express:

const express = require('express');
const app = express();
 
app.get('/', (req, res) => {
  res.send('<h1>Hello, Server-Side Rendering!</h1>');
});
 
app.listen(3000, () => console.log('Server running on port 3000'));

Day 2-3: Setting Up a React Project with SSR

Setting Up React with SSR

Install Dependencies: You’ll need React, ReactDOM, Express, and Babel for JSX transpiling.

npm install react react-dom express @babel/cli @babel/preset-env @babel/preset-react

Basic SSR with React:

// server.js
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const app = express();
 
const App = () => {
  return <h1>Hello from React SSR!</h1>;
};
 
app.get('/', (req, res) => {
  const appHtml = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>SSR Example</title></head>
      <body>
        <div id="root">${appHtml}</div>
      </body>
    </html>
  `);
});
 
app.listen(3000, () => console.log('Server running on port 3000'));

Day 4-5: Client-Side Hydration

What is Hydration?

Hydration refers to the process of attaching event listeners to the pre-rendered HTML on the client side. After the initial server-side render, React needs to take over and make the page interactive.

// client.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.hydrate(
  <App />,
  document.getElementById('root')
);

Why is Hydration Important?

Hydration allows for a smooth transition from server-rendered HTML to a fully interactive React application. Without it, the page would be static and unresponsive to user interaction.

Day 6-7: Implementing Routes with React Router

Setting Up Routing in SSR

To handle navigation, we can use React Router with SSR. React Router will allow you to define routes that can be server-rendered initially.

npm install react-router-dom

Example:

// server.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './App';
 
const app = express();
 
app.get('*', (req, res) => {
  const context = {};
  const appHtml = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>SSR with React Router</title></head>
      <body>
        <div id="root">${appHtml}</div>
      </body>
    </html>
  `);
});
 
app.listen(3000, () => console.log('Server running on port 3000'));

Day 8-9: Adding State Management

Using Redux with SSR

State management in SSR can be tricky because you need to ensure the state is available both on the server and client. Here's how you can set up Redux with SSR:

Install Redux and React-Redux:

npm install redux react-redux

Example: Set up a Redux store and pass it to the client using SSR.

// server.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { Provider } from 'react-redux';
import { StaticRouter } from 'react-router-dom/server';
import App from './App';
import configureStore from './store';
 
const app = express();
const store = configureStore();
 
app.get('*', (req, res) => {
  const context = {};
  const appHtml = ReactDOMServer.renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={context}>
        <App />
      </StaticRouter>
    </Provider>
  );
  
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>SSR with Redux</title></head>
      <body>
        <div id="root">${appHtml}</div>
      </body>
    </html>
  `);
});
 
app.listen(3000, () => console.log('Server running on port 3000'));

Day 10-11: Handling Data Fetching on the Server

Fetching Data Before Render

When building an SSR app, you may need to fetch data on the server before sending the HTML to the client. This ensures that the page is fully populated when the user receives it.

// server.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import axios from 'axios';
import App from './App';
 
const app = express();
 
app.get('*', async (req, res) => {
  const data = await axios.get('https://api.example.com/data');
  
  const context = {};
  const appHtml = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App data={data} />
    </StaticRouter>
  );
  
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>SSR with Data Fetching</title></head>
      <body>
        <div id="root">${appHtml}</div>
      </body>
    </html>
  `);
});
 
app.listen(3000, () => console.log('Server running on port 3000'));

Day 12-13: Deploying Your SSR App

Deploying to Heroku

Prepare for Deployment: Make sure to build your app before deploying.

npm run build

Deploy to Heroku:

Set up a new Heroku app.
Push your project to Heroku.
Set environment variables if necessary.

git push heroku main

Day 14-15: Performance Optimization and Final Review

Optimizing SSR Performance

Code Splitting: Split your code into chunks to load only what's needed.
Caching: Use caching to avoid unnecessary rendering.
Lazy Loading: Load components only when they are needed.

Conclusion

In this 15-day journey, we’ve learned the fundamentals of SSR, how to set up a basic SSR app using React, manage routing, add state management with Redux, fetch data on the server, and deploy our SSR app. By now, you should have a solid understanding of how SSR works and how to build performant, SEO-friendly applications.

Images

SSR Diagram Illustrating the SSR process from the server to the client.

SSR Example Sample React component rendered via SSR.

Feel free to tweak this blog post according to your learning pace and goals. Happy coding!

Learning Server-Side Rendering (SSR) in 15 Days

Learning Server-Side Rendering (SSR) in 15 Days

Introduction

Day 1: Understanding SSR Basics

What is SSR?

Why Use SSR?

Basic Example

Day 2-3: Setting Up a React Project with SSR

Setting Up React with SSR

Day 4-5: Client-Side Hydration

What is Hydration?

Why is Hydration Important?

Day 6-7: Implementing Routes with React Router

Setting Up Routing in SSR

Day 8-9: Adding State Management

Using Redux with SSR

Day 10-11: Handling Data Fetching on the Server

Fetching Data Before Render

Day 12-13: Deploying Your SSR App

Deploying to Heroku

Day 14-15: Performance Optimization and Final Review

Optimizing SSR Performance

Conclusion

Images

On This Page

Comments

Jhon Doe

Rob Simpson

Leave a comment