<p><a href="https://facebook.github.io/jsx/">JSX</a> is an excellent abstraction for building web interfaces. Introduced by Facebook and popularized by React, it&#39;s an extension of JavaScript designed to abstract nested function calls. It&#39;s expected that JSX code will be pre-processed (transpiled) into valid JavaScript before being executed in browsers or environments like Node.js.</p>
<h2>Project Setup</h2>
<p>First of all, let&#39;s start our project and install the necessary dependencies:</p>
<pre><code><div class="highlited-code" data-language="">npm init -y
npm i fastify react react-dom
npm i -D @types/node @types/react @types/react-dom tsx typescript</div>
</code></pre><p>Now, we set up the scripts for our project. The <code>package.json</code> should look like this:</p>
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
  &quot;type&quot;:  &quot;module&quot;,
  &quot;name&quot;:  &quot;fastify-react&quot;,
  &quot;version&quot;:  &quot;1.0.0&quot;,
  &quot;author&quot;:  &quot;Douglas Moura &lt;douglas.ademoura@gmail.com&gt;&quot;,
  &quot;description&quot;:  &quot;POC on rendering React components from Fastify&quot;,
  &quot;main&quot;:  &quot;dist/main.js&quot;,
  &quot;scripts&quot;: {
    &quot;start&quot;:  &quot;tsc &amp;&amp; node dist/main.js&quot;,
    &quot;dev&quot;:  &quot;tsx --watch src/main.tsx&quot;,
    &quot;build&quot;:  &quot;tsc&quot;
  },
  &quot;license&quot;:  &quot;ISC&quot;,
  &quot;dependencies&quot;: {
    &quot;fastify&quot;:  &quot;^4.25.2&quot;,
    &quot;react&quot;:  &quot;^18.2.0&quot;,
    &quot;react-dom&quot;:  &quot;^18.2.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@types/node&quot;:  &quot;^20.11.6&quot;,
    &quot;@types/react&quot;:  &quot;^18.2.48&quot;,
    &quot;@types/react-dom&quot;:  &quot;^18.2.18&quot;,
    &quot;tsx&quot;:  &quot;^4.7.0&quot;,
    &quot;typescript&quot;:  &quot;^5.3.3&quot;
  }
}</div>
</code></pre><p>And this is the <code>tsconfig.json</code> that we will use:</p>
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;:  &quot;ESNext&quot;,
    &quot;module&quot;:  &quot;ESNext&quot;,
    &quot;lib&quot;: [
      &quot;dom&quot;,
      &quot;es6&quot;,
      &quot;es2017&quot;,
      &quot;esnext.asynciterable&quot;
    ],
    &quot;skipLibCheck&quot;:  true,
    &quot;sourceMap&quot;:  false,
    &quot;outDir&quot;:  &quot;./dist&quot;,
    &quot;moduleResolution&quot;:  &quot;node&quot;,
    &quot;removeComments&quot;:  true,
    &quot;noImplicitAny&quot;:  true,
    &quot;strictNullChecks&quot;:  true,
    &quot;strictFunctionTypes&quot;:  true,
    &quot;noImplicitThis&quot;:  true,
    &quot;noUnusedLocals&quot;:  true,
    &quot;noUnusedParameters&quot;:  true,
    &quot;noImplicitReturns&quot;:  true,
    &quot;noFallthroughCasesInSwitch&quot;:  true,
    &quot;allowSyntheticDefaultImports&quot;:  true,
    &quot;esModuleInterop&quot;:  true,
    &quot;emitDecoratorMetadata&quot;:  true,
    &quot;experimentalDecorators&quot;:  true,
    &quot;resolveJsonModule&quot;:  true,
    &quot;baseUrl&quot;:  &quot;.&quot;,
    &quot;jsx&quot;:  &quot;react-jsx&quot;
  },
  &quot;exclude&quot;: [
    &quot;node_modules&quot;
  ],
  &quot;include&quot;: [
    &quot;./src/**/*.ts&quot;,
    &quot;./src/**/*.tsx&quot;
  ]
}</div>
</code></pre><h2>Creating our components</h2>
<p>The React ecosystem already provides the necessary tools for rendering our components to HTML and sending them directly from the server to our client. So, first, let&#39;s create the root component:</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">// src/components/root.tsx

type  RootProps  = {
  children:  React.ReactNode
  title:  string
}

export  function  Root({ children, title }:  RootProps) {
  return (
    &lt;html  lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;meta  charSet=&quot;utf-8&quot;  /&gt;
        &lt;meta  name=&quot;viewport&quot;  content=&quot;width=device-width, initial-scale=1&quot;  /&gt;
        &lt;title&gt;{title}&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;{children}&lt;/body&gt;
    &lt;/html&gt;
  )
}</div>
</code></pre><p>And our home page:</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">// src/components/index.tsx

export  function  App() {
  return (
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
  )
}</div>
</code></pre><h2>Configuring Fastify to Render Our React Component</h2>
<p>As we don&#39;t intend to load React to hydrate our HTML on the client side, we can use the <code>renderToStaticMarkup</code> function exported from <code>react-dom/server</code>. Our server initialization file will look like this:</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">import Fastify from  'fastify'
import { renderToStaticMarkup } from  'react-dom/server'

import { App } from  './components/index.js'
import { Root } from  './components/root.js'

type  RenderArgs  = {
  children:  React.ReactNode
  title:  string
}

const  render  = ({ title, children }:  RenderArgs) =&gt; {
  return `&lt;!DOCTYPE html&gt;${renderToStaticMarkup(
    &lt;Root  title={title}&gt;{children}&lt;/Root&gt;
  )}`
}

const fastify =  Fastify({
  logger:  true,
})

fastify.get('/', async  function  handler(_request, reply) {
  reply.type('text/html')
  return  render({ children:  &lt;App  /&gt;, title:  'Hello, World!' })
})

try {
  await fastify.listen({ port:  3000 })
} catch (err) {
  fastify.log.error(err)
  process.exit(1)
}</div>
</code></pre><p>If you start the project now (<code>npm run dev</code>), you should see the page at <a href="http://localhost:3000/">http://localhost:3000</a>. Of course, we can enhance our implementation by using the new streaming API, introduced in React 18 (<a href="https://github.com/reactwg/react-18/discussions/106#discussion-3611411">which is the recommended method</a>). To do that, we will make the following changes to our code:</p>
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">import Fastify from  'fastify'
import { renderToStaticNodeStream } from  'react-dom/server'
import { Transform } from  'node:stream'

import { App } from  './components/index.js'
import { Root } from  './components/root.js'

type  RenderArgs  = {
  children:  React.ReactNode
  title:  string
}

const  render  = ({ title, children }:  RenderArgs) =&gt; {
  let  isFirstChunk  =  true
  const  prepend  =  new  Transform({
    transform(chunk, _encoding, callback) {
      if (isFirstChunk) {
        isFirstChunk  =  false
        this.push('&lt;!DOCTYPE html&gt;')
      }
      callback(null, chunk)
    },
  })

  return  renderToStaticNodeStream(
    &lt;Root  title={title}&gt;{children}&lt;/Root&gt;
  ).pipe(prepend)
}

const  fastify  =  Fastify({
  logger:  true,
})

fastify.get('/', async  function  handler(_request, reply) {
  const  stream  =  render({ children:  &lt;App  /&gt;, title:  'Hello, World!' })

  reply.type('text/html')
  reply.send(stream)
})

try {
  await  fastify.listen({ port:  3000 })
} catch (err) {
  fastify.log.error(err)
  process.exit(1)
}</div>
</code></pre><p>And with that, we are able to render our React components on the server side and stream them to our client. Here is the <a href="https://github.com/DouglasdeMoura/react-fastify">link</a> to the repository.</p>


Douglas Moura

Douglas Moura

#Tips

Rendering JSX on the Server with Fastify