package server-reason-react

  1. Overview
  2. Docs
Rendering React components on the server natively

Install 

dune-project
 Dependency

github.com Readme Changelog MIT License Edit opam file Versions (5)

Authors

  1. D
    David Sancho <dsnxmoreno@gmail.com>

Maintainers

  1. D
    David Sancho <dsnxmoreno@gmail.com>

Sources

server-reason-react-0.4.0.tbz
sha256=7811cd16a7256edbebd06057072142fc2fa1d81de784442e21f3225f06f08ce2
sha512=d60084b34f4086bc401f5f1e209714ab297b5dd94b9b55050816ba9dd0579b2c88745b1813ab57d9584c826af9602df279e8ecfdc04cde62f94d1fec9506dd45

doc/index.html

server-reason-react

server-reason-react is a Native implementation of React's Server-side rendering (SSR) and React Server Components (RSC) architecture for Reason.

server-reason-react is designed to be used with reason-react and Melange. Together it enables developers to write efficient React components using a single language, type-safe and performant, while building for both native executables and JavaScript.

Features

  • Server-side rendering HTML with ReactDOM.renderToString/ReactDOM.renderToStaticMarkup
  • Server-side rendering streaming HTML with ReactDOM.renderToStream (similar to react@18 renderToReadableStream)
  • Includes React.Suspense and React.use() implementations
  • server-reason-react-ppx - A ppx transformation to support JSX on native
  • All reason-react interface is either implemented or stubbed (some of the methods, like React.useState need to be stubbed because they aren't used on the server!)
  • React Server Components - A ReactServerDOM module for streaming RSC payload, an esbuild plugin to enhance the bundle with client-components mappings, a Dream middleware to serve the RSC endpoint and a dummy implementation of a router (still work in progress)

Warning: This repo contains a few parts that are considered experimental and there's no guarantee of stability. Most of the stable parts are used in production at ahrefs.com, app.ahrefs.com and wordcount.com. Check each module's documentation for more details.

Why

There are plenty of motives for it, the main one is that ahrefs (the company I work for) needs it. We use OCaml for the backend and Reason (with React) for the frontend. We wanted to take advantage of the same features from React.js in the server as well.

Currently 100% of the public site (ahrefs.com), the shell part of the dashboard (app.ahrefs.com) and wordcount.com are rendered on the server with server-reason-react.

What made us create this library was mostly:

  • Use the same language (Reason) for both server and client
  • Embrace server-client integrations such as type-safe routing, JSON decoding/encoding, sharing types and logic, while keep enjoying functional programming patterns
  • Native performance is better than JavaScript performance (Node.js, Bun, Deno)
  • Writing React from a different language than JavaScript, but still using the brilliant pieces from the ecosystem
  • Exploration of OCaml effects and React
  • Further exploration with OCaml multicore, direct-style and concurrency with React features such as async components, React.use or Suspense

Explained more about the motivation in this blog post and also in my talk about Universal react in OCaml at fun-ocaml 2024 and Server side rendering React natively with Reason at ReactAlicante 2023

Other libraries inside this repo

Aside from the core (React, ReactDOM and ReactServerDOM), server-reason-react repo contains some common melange libraries to ensure components are universal. Some of them are reimplementations in native of those libraries, and others are new implementations. Currently they are part of the repository, but eventually will be moved out to their own opam packages and repositories.

Name

Description

Melange equivalent library

server-reason-react.browser_ppx

A ppx to discard code for each platform with different attributes: let%browser_only, switch%platform and @platform

server-reason-react.url_js and server-reason-react.url_native

Universal URL module: binds to window.URL in browser, implemented with opam-uri in native

server-reason-react.melange_ppx

A ppx to add the melange attributes to native code

melange.ppx

server-reason-react.promise

Vendored version of aantron/promise with melange support PR#80

promise

server-reason-react.belt

Implementation of Belt for native API reference

melange.belt

server-reason-react.js

Implementation of Js library for native (unsafe/incomplete). Check the issue #110 for more details

melange.js

server-reason-react.fetch

Stub of fetch with browser_ppx to compile in native

melange.fetch

server-reason-react.webapi

Stub version of Webapi library for native code compilation

melange-webapi

server-reason-react.dom

Stub version of Dom library for native code compilation

melange-dom

Guides

  1. Get started
  2. What does universal code mean?
  3. How to organise universal code
  4. Exclude client code from the native build
  5. Externals and melange attributes
  6. SSR and hydration

Core API

Those are the core libraries of server-reason-react.

Next

Get started