How-to guide: Server-render TSX components using Preact

[davidharting]

Summary

Hello Adonis community!

My background is in React. I really enjoy the component model of React. JSX feels ergonomic to me. I especially love that with TSX you get:

• Type-safe components
• A place to define some logic in TypeScript inside the component. For instance, to do derive some value from props for display.

I love this, but I also love the simplicity of keeping everything on the server (e.g., Inertia has more moving parts than I wanted). So I wondered: Can I simply render TSX components to HTML strings and serve those up? You can, and it was easier to setup than I expected.

I have a demo repo here: https://github.com/davidharting/adonisjs-preact-ssr. I walk through the pieces below.

This could be better organized, but I tried to do this in as few files as possible. Note, that there is no special build step, just a tweak to the tsconfig - TypeScript natively supports compiling TSX to js.

Code

You can check out the repo, but I also compile the highlights here.

Install Preact

npm install --save preact preact-render-to-string

tsconfig.json

Add these lines, per the Preact TypeScript guide.

{
  "extends": "adonis-preset-ts/tsconfig.json",
  "include": ["**/*"],
  "exclude": ["node_modules", "build"],
  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
    "outDir": "build",
    "rootDir": "./",
    "sourceMap": true,
    "paths": {
      "App/*": ["./app/*"],
      "Config/*": ["./config/*"],
      "Contracts/*": ["./contracts/*"],
      "Database/*": ["./database/*"]
    },
    "types": [
      "@adonisjs/core",
      "@adonisjs/repl",
      "@adonisjs/session",
      "@adonisjs/view",
      "@adonisjs/shield",
      "@japa/preset-adonis/build/adonis-typings"
    ]
  }
}

Routing works normally

import Route from '@ioc:Adonis/Core/Route'
Route.get('/', 'HomeController.show')

Controller logic with TSX component and rendering defined inside

This is app/Controllers/Http/HomeController.tsx

In production, I would separate out the HomePage TSX component into its own file
I would also define the rendering utility in its own file, and perhaps add it to Context

import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import type { VNode, FunctionComponent } from 'preact'

import { render as preactRenderToString } from 'preact-render-to-string'

export default class HomeController {
  public async show(ctx: HttpContextContract) {
    const query = ctx.request.qs()
    const name = query['name'] || 'friend'
    return render(ctx, <HomePage name={name} />)
  }
}

type HomePageProps = {
  name: string
}
const HomePage: FunctionComponent<HomePageProps> = ({ name, children }) => {
  return (
    <>
      <h1>Hello, {name}!</h1>
      {children}
      <p>This is happening in preact</p>
    </>
  )
}

type RenderOptions = {
  layout?: string
}


const render = (ctx: HttpContextContract, component: VNode, options: RenderOptions = {}) => {
  // We still define an edge template for the layout
  const layout = options.layout ?? 'layout/app'
  let contents = ''
  if (component) {
    // Render the component to an HTML string
    contents = preactRenderToString(component)
  }
  // Insert the HTML string inside the layout Edge template
  return ctx.view.render(layout, { contents })
}

Extending this for interactivity

I would recommend using Unpoly or htmx if you need to achieve client-side interactivity. This way, you can continue to keep all application logic on the server and keep the straightforward model of serving HTML.

With this model, all TSX components are rendered on the server. The components are not sent to the frontend - just the rendered HTML.

If you prefer to render components on the client, or both client and server, for your project - then Inertia will be a better fit.

[thetutlage]

Love this approach. I do see the benefit of type safety (as you mentioned) when using TSX on the server. I mainly have two concerns around it.

• If you want the same set of markup to be interactive using React or Preact, then you will have to introduce a build process and you slowly start to loose the simplicity. But, I love the way you have used TSX just for rendering initial HTML and going back to same paradigm of UnPoly and HTMX for interactivity. So this concern has mainly been addressed.
• Having a way to replicate existing Edge tags like @can (uses bouncer) or @entryPoints and so on. I think, these can be done in form of components with TSX and then making sure that the TSX integration is actively maintained.

Good work on this 💪

[davidharting]

@thetutlage thank you so much for taking a look at this post and for the kind words!

Your concerns make complete sense to me.

Having a way to replicate existing Edge tags like @can (uses bouncer) or @entryPoints and so on

I have been thinking on this. Part of why I am still using Edge to render the layout is so that I can use Edge helpers for pulling in CSS and JS client-side assets and I think that is the best way.

As for other helpers, I am thinking that I can call Adonis IoC code directly inside the component. Additionally, I could make the context variable a prop for page components. This way, i can access bouncer off of the HTTP context object.

It is not as handy as the Edge helpers. But, the nice thing about rendering on the server only is that you can safely call any server-side code.

I want to try this out on a non-trivial project to see if it actually ends up being convenient!

[thetutlage]

Cool. Looking forward to see how it goes for you!

[davidharting]

@thetutlage started some interesting discussion on a similar topic here:

https://twitter.com/AmanVirk1/status/1672848121292783616?s=20