React server side rendering in express (typescript guide)

Using JSX and TSX in Express.js - Learn how to render static HTML pages for each page request by integrating React components and TypeScript.

  • Table of contents

In Express JS you can use template engines to render views. You can also replace your views with React JSX components and render them to static HTML for each page request.

Install react-dom

In an existing Express project install react-dom and react:

npm install --save react-dom react

Next setup tsconfig.json

Configure typescript to process jsx in your tsconfig.json file:

{
  "jsx": "react"
}

Create a view

Create a .tsx file and export a JSX element:

import React from "react";

export function Home() {
  return <div>
    <h1 className={'h1'}>Hi</h1>
  </div>
}

Render the view on page request

Inside a express route callback handler render the view to a buffer and send:

export function renderReact(res: Response,  x: JSX.Element) {
  // render the element
  const root = ReactDOMServer.renderToStaticMarkup(x);
  // embed in HTML template
  const html = `<html lang="en">
  <body>
    <main id="root">${root}</main>
  </body>
  </html>`
  // send response
  res.status(200).contentType('text/html').send(Buffer.from(html))
}

Now call this with a JSX component in your route:

app.get("/", function (req, res) {
    renderReact(res, Home())
});
Email and SMS Platform
Create a free account in 3 clicks