<p><a href="https://facebook.github.io/jsx/">JSX</a> é uma excelente abstração para montar interfaces. Introduzida pelo Facebook e popularizada pelo React, trata-se de uma extensão do JavaScript para abstrair a chamada de funções aninhadas. É esperado que o código JSX seja pré-processado (transpilado) para JavaScript válido antes de ser executada nos navegadores ou em ambientes como Node.js.</p>
<h2>Configuração do projeto</h2>
<p>Antes de tudo, vamos iniciar o nosso projeto e instalar as dependências necessárias:</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>Agora, configuramos os <em>scripts</em> do nosso projeto. O <code>package.json</code> deverá ficará assim:</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>E esse é o <code>tsconfig.json</code> que iremos utilizar:</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>Criando nossos componentes</h2>
<p>O ecossistema do React já fornece as ferramentas necessárias para renderizarmos os nossos componentes para HTML e enviarmos diretamente do servidor para o nosso cliente. Então, primeiro, vamos criar o componente raiz:</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>E nossa página inicial:</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>Configurando o Fastify para renderizar nosso componente React</h2>
<p>Como não pretendemos carregar o React para hidratar o nosso HTML do lado do cliente, podemos usar a função <code>renderToStaticMarkup</code> exportada de <code>react-dom/server</code>. Nosso arquivo de inicialização do servidor ficará assim:</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'

// Importando com o `.js` no final, o arquivo &quot;buildado&quot;
// fará as importações corretamente e você não deverá ver nenhum erro na
// IDE, ainda que os arquivos tenham a extensão `.tsx`.
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; {
  // Aqui, inserimos `&lt;!DOCTYPE html&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>Se você iniciar o projeto agora (<code>npm run dev</code>), você deverá ver a página em <a href="http://localhost:3000">http://localhost:3000</a>. Claro, podemos melhorar a nossa implementação usando a nova API de stream, introduzida no React 18 (<a href="https://github.com/reactwg/react-18/discussions/106#discussion-3611411">que é o método recomendado</a>). Para isso, faremos as seguintes alterações no nosso código:</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>E com isso, conseguimos renderizar nossos componentes React do lado do servidor e fazer <em>streaming</em> deles para o nosso cliente. E este é o <a href="https://github.com/DouglasdeMoura/react-fastify">link</a> do repositório.</p>


Douglas Moura

Douglas Moura

#Fastify

Renderizando JSX no servidor com Fastify