Node.js Design Patterns/

...

/

Server-Side Rendering

Server-Side Rendering

Learn how to fetch content from the server and render it in the frontend.

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:

Press + to interact
npm install --save fastify fastify-static esm

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

Press + to interact
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 introduced here step by step:

  1. Since we’re not going to use the webpack dev server, we need to return the full HTML code of the page from our server. Here, we’re defining the HTML template for all our pages using a function and a template literal. We’ll be passing the result of our server-rendered React application as content to this template to get the final HTML ...