SSR with React and Deno
Posted May 10, 2022 by ynwd ‐ 2 min read
This is the Simple Implementation of Server Side Rendering (SSR) with React and Deno. In this guide you will learn how easy and clean to setup SSR in Fastro.
SSR implementation is quite complicated. Fastro simplifies it with a simple API and minimal config.
It does bundling and hydration at application initiation so that the loading process is faster.
App structure
.
├── components
│ └── app.tsx
├── static
├── server.tsx
└── deno.json
Configuration
Create deno configuration file: deno.json
. This is used to configure TypeScript on Deno.
{
"compilerOptions": {
"strict": true,
"jsx": "react-jsx",
"jsxImportSource": "https://esm.sh/react"
}
}
Create app and static dirs
mkdir components && mkdir static
components
folder is place for react components. This is the default name. If you change it, it will throw an error. See the example to see other implementation.static
is folder for hydrated and bundled files created during app initiation. This file will be accessed by the defaultindex.html
.
Component
Create react component: components/app.tsx
. This is very basic react component. I got it from https://dev.to/craigmorten/writing-a-react-ssr-app-in-deno-2m7.
// @deno-types="https://cdn.esm.sh/v77/@types/react@18.0.9/react.d.ts"
import React from "https://esm.sh/react@18.1.0";
const App = () => {
const [count, setCount] = React.useState(0);
return (
<div>
<h1>Hello Deno Land!</h1>
<button onClick={() => setCount(count + 1)}>Click the 🦕</button>
<p>You clicked the 🦕 {count} times</p>
</div>
);
};
export default App;
Endpoint
Create routing file: server.tsx
import application, { response } from "https://deno.land/x/fastro@v0.57.6/server/mod.ts";
import rendering from "https://deno.land/x/fastro@v0.57.6/server/ssr.ts";
import App from "./components/app.tsx";
const component = rendering(<App />);
const app = application(component)
.static("/static")
.get("/", () => {
return response(component).render({ title: "Hello world" });
});
console.log("Listening on: http://localhost:8000");
await app.serve();
In this file we create 2 endpoints:
/
is the root for react app./static
is wherebundle.js
available.bundle.js
is generated automatically when you run the webapp.
How to run locally
deno run -A --unstable server.tsx
Source-code: ssr-example