Skip to content

SSR (server-side-rendering)

Background

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">
<head>
  <link href="/static/css/main.caf06914.chunk.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
   <script src="/static/js/2.20b865e0.chunk.js"></script>
   <script src="/static/js/main.ed646a45.chunk.js"></script>
</body>
</html>

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.

Workflow

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

Notes:

  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

Frontend

  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).

Backend

Django

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.

Flask

For Flask dev, we might also need below packages.

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

FastAPI

  1. CORSMiddleware

Pros and Cons

Pros:

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

Cons:

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

Resources