Jan 4

3 min read

A React SSR hello world project in Deno

Introduction

Server-side rendering (in short, SSR) addresses the performance and search engine optimization issues of single-page JavaScript applications. In contrast to client-side rendering, the SSR generates static content on the server before sending it over to the user’s browser. Only static content is sent to the client.

Server-side rendering improves site speed and results in better Core Web Vitals scores. However, sometimes it can be difficult to implement and might also increase First Input Delay.

Single-page applications (SPAs) are a web app architecture that appeared as an alternative to traditional websites and multi-page applications. SPAs, also known as client-side apps, became possible with the introduction of asynchronous JavaScript (AJAX), which makes it possible to update smaller parts of the user interface without reloading the full page.

Modern-day SPAs are often built with frontend UI frameworks such as React, Vue, and Angular. They consist of reusable JavaScript components fully rendered on the client side.

(Introduction credit: https://www.debugbear.com/blog/server-side-rendering)

In this article, I’m going to show how to build a very simple ‘hello world’ React SSR application for Deno. This is a very simple starter project to get started with React in Deno.

Step 1

The first step is to get the required packages. For Node.js, the source would have been NPM. For Deno also, NPM can be used. But it is much easier to get packages directly using a CDN URL.

Two React packages are required for the hello world SSR service:

The entire React package from https://esm.run/react
One particular API renderToReadableStream from React DOM server https://esm.run/react-dom/server

Both of the import URLs are hosted on a publicly available CDN: https://www.jsdelivr.com/esm. We can use them with confidence. The dependencies will be placed in a deps.ts file.

deps.ts

export { renderToReadableStream } from "https://esm.run/react-dom/server";
export * as React from "https://esm.run/react";

The dependencies can be downloaded and verified using the optional deno cache command. Or, for these simple cases, deno run command can directly be used too.

> deno cache deps.ts

Step 2

The React SSR hello world has a single TSX file that’ll have the App component and the main program. The renderToReadableStream API will be used to convert rendered HTML into a ReadableStream that can be given directly to the Response object.

The application code is as follows:

server.tsx

import { renderToReadableStream } from "./deps.ts";
import { React } from "./deps.ts";

const App = () => (
  <html>
    <body>
      <h1>Hello World</h1>
      <p>This is an example.</p>
    </body>
  </html>
);

const headers = {
  headers: {
    "Content-Type": "text/html",
    "Cache-Control": "no-transform",
  },
};

Deno.serve(
  async (req) => {
    return new Response(await renderToReadableStream(<App />), headers);
  },
  { port: 3000 },
);

Note that the file extension must be TSX. If it’s only TS, then Deno will throw an error while trying to parse the TS file.

Step 3

There are two ways to run the simple SSR hello world application:

Use deno run command
Use deno task command

Just to make it a complete package, I’ll be using deno task command. This requires writing a deno.jsonc file that contains the instructions for task subcommands. The only task I’m going to have is to start the application.

deno.jsonc

{
  "tasks": {
    "start": "deno run --allow-net=:3000 --unstable server.tsx"
  }
}

Step 4

To test it out, the server can be started using deno task <specific-task>:

> deno task start
Task start deno run --allow-net=:3000 --unstable server.tsx
Listening on http://127.0.0.1:3000/

To check the SSR, a browser can be opened or curl can be used:

The simple SSR app works fine!.

The simple app demonstrated in this article can be cloned from the following GitHub repo:

GitHub - mayankchoubey/deno-react-ssr-hello-world: A simple React SSR hello world in Deno

A simple React SSR hello world in Deno. Contribute to mayankchoubey/deno-react-ssr-hello-world development by creating…

github.com

More articles on similar topics can be seen in the magazine: The JS runtimes.