Django React SSR

A demonstration project showcasing both client-side and server-side rendering of React applications within a Django framework. This implementation uses a Node.js service for server-side rendering while maintaining Django as the primary web server.

Quick Start

The easiest way to start all services is to use the provided script:

./start.sh

This will:

1. Build the React app
2. Start the Node.js SSR server
3. Start the Django server

Available Routes

Once the servers are running, you can access:

• http://127.0.0.1:8000/ - Client-side rendered React app
• http://127.0.0.1:8000/ssr-render/ - Server-side rendered React app

Architecture

The project uses two Django apps to handle different rendering approaches:

1. react_app (Client-Side Rendering)

• Located at django_ssr_project/react_app/
• Handles traditional client-side React rendering
• Contains:
  • React components in src/
  • Built files in static/react_app/dist/
  • Templates in templates/react_app/
• Rendering process:
  1. Browser receives empty container
  2. Loads React JavaScript bundle
  3. React hydrates and renders the app in the browser

2. react_ssr (Server-Side Rendering)

• Located at django_ssr_project/django_ssr_project/react_ssr/
• Handles server-side rendering integration
• Contains:
  • Django view that proxies to Node.js
  • Template that wraps the server-rendered HTML
• Rendering process:
  1. Node.js renders React component to HTML
  2. Django wraps this HTML in a template
  3. Browser receives pre-rendered HTML
  4. React hydrates the app with existing content

Manual Setup & Running

1. Node SSR Service

cd node_ssr_service
npm install
npm run build
npm run start

The Node SSR service will run on http://localhost:3001

2. Django Proxy Server

First, set up and activate the Python virtual environment:

cd django_ssr_project
python3 -m venv venv
source venv/bin/activate  # On Windows, use: venv\Scripts\activate
python3 -m pip install django

Then start the Django server:

python manage.py runserver

The Django server will run on http://127.0.0.1:8000

How it Works

1. The Node SSR service (port 3001) renders React components server-side
2. The Django server (port 8000) acts as a proxy:
   • Receives requests from clients
   • Forwards them to the Node SSR service
   • Returns the server-rendered React content

Development

• React components are in node_ssr_service/src/
• After modifying React components, rebuild with npm run build
• Django proxy configuration is in django_ssr_project/django_ssr_project/urls.py

Requirements

• Node.js & npm for the SSR service
• Python 3.x & virtualenv for Django
• Required Python packages are installed in the virtual environment
• Required Node.js packages are listed in package.json