Search⌘ K
AI Features
Home
Courses
Node.js Design Patterns

Server-Side Rendering

Explore how to enhance React applications by rendering content on the server using Fastify and StaticRouter. Understand how to serve full HTML pages, manage dynamic routing, and handle status codes correctly to optimize performance and SEO. Gain practical skills in building universal JavaScript web applications with server-side rendering.

We'll cover the following...

We saw in the previous lesson that our application works and this is great news. However, the app is running only on the client side, which means that if we try to curl one of the pages, we’ll see something like this: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My library</title>
  </head>
  <body>
  <div id="root"></div>
  <script type="text/javascript" src="/main.js"></script></body>
</html>
Output of the curl command

No content whatsoever! There’s only an empty container (the root div), which is where our application is mounted at runtime.

Rendering the content

In this section, we’ll modify our application to be able to render the content from the server as well.

Let’s start by adding fastify and esm to our project by using the following command:

Shell
npm install --save fastify fastify-static esm

Now, we can create our server application in the src/server.js ...

C++
import { resolve, dirname } from 'path'
import { fileURLToPath } from 'url'
import react from 'react'
import reactServer from 'react-dom/server.js'
import htm from 'htm'
import fastify from 'fastify'
import fastifyStatic from 'fastify-static'
import { StaticRouter } from 'react-router-dom'
import { App } from './frontend/App.js'
const __dirname = dirname(fileURLToPath(import.meta.url))
const html = htm.bind(react.createElement)
// (1)
const template = ({ content }) => `<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My library</title>
  </head>
  <body>
    <div id="root">${content}</div>
    <script type="text/javascript" src="/public/main.js"></script>
  </body>
</html>`
const server = fastify({ logger: true }) // (2)
server.register(fastifyStatic, { // (3)
  root: resolve(__dirname, '..', 'public'),        
  prefix: '/public/'
})
server.get('*', async (req, reply) => { // (4)
  const location = req.raw.originalUrl
                                        // (5)
   const serverApp = html`
    <${StaticRouter} location=${location}>
      <${App}/>
    </>
  `
  const content = reactServer.renderToString(serverApp) // (6)
  const responseHtml = template({ content })
  reply.code(200).type('text/html').send(responseHtml)
})
const port = Number.parseInt(process.env.PORT) || 3000 // (7)
const address = process.env.ADDRESS || '127.0.0.1'
server.listen(port, address, function (err) {
  if (err) {
    console.error(err)
    process.exit(1)
  }
})

There’s a lot of code here, so let’s discuss the main concepts ...