Skip to content

SSR (server-side-rendering)


Let's first check why SSR is introduced and what problem it solves.

If you create web app with SPA pattern, check the HTML source code, you will see something like this:

<html lang="en">
  <link href="/static/css/main.caf06914.chunk.css" rel="stylesheet">
<div id="root"></div>
   <script src="/static/js/2.20b865e0.chunk.js"></script>
   <script src="/static/js/main.ed646a45.chunk.js"></script>

We notice some problems here:

  1. The above <div id="root"></div> is empty, the search engine can not understand what the page is about without running the JS.
  2. The browser need to run some JS code to build the DOM tree (might need to send some extra requests), which make the web page is a little slow to load.


Server-side rendering (SSR) is a popular technique for rendering a client-side single page application (SPA) on the server and then sending a fully rendered page to the client. This allows for dynamic components to be served as static HTML markup.

SPA Workflow


  1. When user visit the website, Node web server try to render component to HTML on the server side.
  2. The Node web server will send request to the api backend to fetch dynamic content
  3. After that, the HTML will be returned to the browser.
  4. The browser will run JS and attach the event handlers to the existing DOM elements. This also called rehydration


  1. We can use create-next-app to create a Next.js application (React).
  2. We can use create-nuxt-app to create Nuxt.js application (Vue).



For Django dev, we might also need below packages.

  1. Django REST framework which will help build REST API.
  2. dj-rest-auth or djoser for auth API support.
  3. django-cors-headers will help solve Cross-Origin Resource Sharing (CORS) issue.
  4. graphene-django Integrate GraphQL into your Django project.


For Flask dev, we might also need below packages.

  1. flask-restful
  2. flask-api
  3. flask-graphql
  4. flask-cors


  1. CORSMiddleware

Pros and Cons


  1. Good performance (First Paint (FP) and First Contentful Paint (FCP))
  2. The web app supports SEO very well.


  1. Can not benefit from some awesome Django, Flask features (templates, form, built-auth)