{"id":19867062,"url":"https://github.com/azurespheredev/faster_react","last_synced_at":"2026-05-04T18:34:32.149Z","repository":{"id":259646448,"uuid":"869877686","full_name":"azurespheredev/faster_react","owner":"azurespheredev","description":"🚀 \"faster_react\" is a framework that performs Server-Side Rendering (SSR) and hydration of all React components, and generates routes for them.","archived":false,"fork":false,"pushed_at":"2024-10-14T23:32:02.000Z","size":108,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T15:50:05.752Z","etag":null,"topics":["deno","faster","hydration","react","ssr"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azurespheredev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-09T03:48:27.000Z","updated_at":"2024-10-14T23:32:05.000Z","dependencies_parsed_at":"2024-10-27T04:39:51.329Z","dependency_job_id":null,"html_url":"https://github.com/azurespheredev/faster_react","commit_stats":null,"previous_names":["blitzsprinter/faster_react","azurespheredev/faster_react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azurespheredev%2Ffaster_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azurespheredev%2Ffaster_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azurespheredev%2Ffaster_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azurespheredev%2Ffaster_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azurespheredev","download_url":"https://codeload.github.com/azurespheredev/faster_react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241278753,"owners_count":19938018,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deno","faster","hydration","react","ssr"],"created_at":"2024-11-12T15:28:13.582Z","updated_at":"2026-05-04T18:34:27.089Z","avatar_url":"https://github.com/azurespheredev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 **Faster + React**\n\n## 🌟 Introduction\n\n`faster_react` is a framework that performs **Server-Side Rendering (SSR)** and\n**hydration** of all React components, and generates routes for them. To utilize\nthis, you must use the routes helper provided by the framework\n([React Router](#-react-router)). The framework's configuration file is located\nat `options.json`.\n\n### 🎯 **What Does `faster_react` Do for You?**\n\nFocus solely on development! This framework handles:\n\n- 🛣️ **Automatic route generation** for React components.\n- 🔄 **Automatic inclusion** of new React components when\n  `framework =\u003e \"dev\": true`.\n- 📦 **Automatic frontend bundling** when `framework =\u003e \"dev\": true`.\n- ♻️ **Automatic browser reload** when `framework =\u003e \"dev\": true`.\n- 🗜️ **Automatic frontend minification** when `framework =\u003e \"dev\": false`.\n- 🚀 **Automatic backend reload** when changes are detected and\n  `framework =\u003e \"dev\": true`.\n- 🌐 **Automatic detection** of Deno Deploy environment. Test in other\n  serverless environments by setting `framework =\u003e \"serverless\": true`.\n\n\u003e **Note:** The project includes a simple application example demonstrating each\n\u003e functionality.\n\n---\n\n### ⚡ **About Faster**\n\nFaster is an optimized middleware server with an incredibly small codebase (~300\nlines), built on top of Deno's native HTTP APIs with no dependencies. It\nincludes a collection of useful middlewares:\n\n- 📄 **Log file**\n- 🗂️ **Serve static**\n- 🌐 **CORS**\n- 🔐 **Session**\n- ⏱️ **Rate limit**\n- 🛡️ **Token**\n- 📥 **Body parsers**\n- 🔀 **Redirect**\n- 🔌 **Proxy**\n- 📤 **Handle upload**\n\nFully compatible with Deno Deploy. Examples of all resources are available in\nthe [README](https://github.com/hviana/faster). Faster's ideology is simple: all\nyou need is an optimized middleware manager; all other functionality is\nmiddleware.\n\n---\n\n## 📚 **Contents**\n\n- [⚡ Benchmarks](#-benchmarks)\n- [🏗️ Architecture](#%EF%B8%8F-architecture)\n- [📂 App Structure](#-app-structure)\n  - [📦 Get Deno Kv and Deno Kv Fs](#-get-deno-kv-and-deno-kv-fs)\n  - [📝 Backend API](#-backend-api)\n  - [🧩 Backend Components](#-backend-components)\n  - [📁 Backend Files](#-backend-files)\n  - [🖥️ Frontend Components](#%EF%B8%8F-frontend-components)\n  - [🎨 Frontend CSS](#-frontend-css)\n  - [📜 Frontend Files](#-frontend-files)\n  - [🗂️ Static](#%EF%B8%8F-static)\n- [🧭 React Router](#-react-router)\n- [📦 Packages Included](#-packages-included)\n- [🛠️ Creating a Project](#%EF%B8%8F-creating-a-project)\n- [🚀 Running a Project](#-running-a-project)\n- [🌐 Deploy](#-deploy)\n- [📖 References](#-references)\n- [👨‍💻 About](#-about)\n\n---\n\n## ⚡ **Benchmarks**\n\n`faster_react` has only **0.9%** of the code quantity of Deno Fresh.\n\n**Benchmark Command:**\n\n```bash\n# Deno Fresh\ngit clone https://github.com/denoland/fresh.git\ncd fresh\ngit ls-files | xargs wc -l\n# Output: 104132 (version 1.7.1)\n\n# faster_react\ngit clone https://github.com/azuresphere7/faster_react.git\ncd faster_react\ngit ls-files | xargs wc -l\n# Output: 1037 (version 13.6)\n```\n\n---\n\n## 🏗️ **Architecture**\n\nThis framework utilizes **Headless Architecture** [[1]](#1) to build the\napplication, combined with the **Middleware Design Pattern** [[2]](#2) for\ndefining API routes in the backend.\n\n- **Headless Architecture** provides complete freedom to the developer, reducing\n  the learning curve. Despite this freedom, there is an **explicit separation\n  between backend and frontend**, which aids in development.\n- The **Middleware Design Pattern** offers a practical and straightforward\n  method for defining API routes.\n\n![Architecture Diagram](./docs/architecture.png)\n\n---\n\n## 📂 **App Structure**\n\nAll application folders are inside the `app` folder.\n\n### 📦 **Get Deno Kv and Deno Kv Fs**\n\nOn the backend, if a **Deno KV** instance is available, access instances via\n`Server.kv` and `Server.kvFs`:\n\n```typescript\nimport { Server } from \"faster\";\n```\n\nSee **Deno KV** settings in `options.json`.\n\n- **Deno KV File System (`Server.kvFs`):** Compatible with Deno Deploy. Saves\n  files in 64KB chunks. Organize files into directories, control the KB/s rate\n  for saving and reading files, impose rate limits, set user space limits, and\n  limit concurrent operations—useful for controlling uploads/downloads. Utilizes\n  the Web Streams API.\n\nMore details: [deno_kv_fs](https://github.com/hviana/deno_kv_fs)\n\n\u003e **Note:** The project includes a simple application example demonstrating each\n\u003e functionality.\n\n---\n\n### 📝 **Backend API**\n\n- **Imports:** Import your backend libraries here.\n- **Organization:** Files can be organized into subdirectories.\n- **File Extension:** Use `.ts` files.\n- **Structure:** Flexible file and folder structure that doesn't influence\n  anything.\n- **Routing:** Define routes using any pattern you prefer.\n- **Exports:** Must have a `default export` with a function (can be\n  asynchronous).\n- **Function Input:** Receives an instance of `Server` from `faster`.\n- **Usage:** Perform backend manipulations here (e.g., fetching data from a\n  database), including asynchronous calls.\n- **Routes:** Define your custom API routes. For help, see:\n  [faster](https://github.com/hviana/faster)\n\n---\n\n### 🧩 **Backend Components**\n\n- **Optionality:** A backend component is optional for a frontend component.\n- **Imports:** Import your backend libraries here.\n- **Organization:** Organize files into subdirectories.\n- **File Extension:** Use `.ts` files.\n- **Correspondence:** Each file should have the same folder structure and name\n  as the corresponding frontend component but with a `.ts` extension.\n\n  - **Example:**\n    - Frontend: `frontend/components/checkout/cart.tsx`\n    - Backend: `backend/components/checkout/cart.ts`\n\n- **Exports:** Must have a `default export` with an object of type\n  `BackendComponent`:\n\n  ```typescript\n  import { type BackendComponent } from \"@helpers/backend/types.ts\";\n  ```\n\n- **Usage:** Intercept a frontend component request:\n  - **Before Processing (`before?: RouteFn[]`):** List of middleware functions\n    (see: [faster](https://github.com/hviana/faster)). Use to check headers\n    (`ctx.req.headers`) or search params (`ctx.url.searchParams`), like tokens,\n    impose rate limits, etc.\n\n    - **Note:** To cancel page processing, do not call `await next()` at the end\n      of a middleware function.\n    - **Important:** If you want the page to be processed, **do not** consume\n      the `body` of `ctx.req`, or it will cause an error in the framework.\n\n  - **After Processing\n    (`after?: (props: Record\u003cany, any\u003e) =\u003e void | Promise\u003cvoid\u003e`):** Function\n    receives the `props` that will be passed to the component. Add backend data\n    to these `props`, such as data from a database. Can be asynchronous.\n\n---\n\n### 📁 **Backend Files**\n\n- **Imports:** Import your backend libraries here.\n- **Organization:** Organize files into subdirectories.\n- **File Extension:** Use `.ts` files.\n- **Usage:** Free to make exports or calls (including asynchronous).\n- **Purpose:** Group common functions/objects for `backend/api`,\n  `backend/components`, and other `backend/files`, such as user validations.\n\n---\n\n### 🖥️ **Frontend Components**\n\n- **Imports:** Use only frontend libraries.\n- **Organization:** Organize files into subdirectories.\n- **File Extension:** Use `.tsx` files.\n- **Rendering:** Rendered on the server and hydrated on the client.\n- **Routes Generated:** Two routes per file:\n  - **Page Route:** For rendering as a page, e.g., `/pages/checkout/cart`.\n  - **Component Route:** For rendering as a component, e.g.,\n    `/components/checkout/cart`.\n- **Initial Route (`/`):** Points to `frontend/components/index.tsx`.\n- **Exports:** Must have a `default export` with the React Function/Component.\n- **Props Passed to Component:**\n  - Form-submitted data (or JSON POST).\n  - URL search parameters (e.g., `/pages/myPage?a=1\u0026b=2` results in\n    `{a:1, b:2}`).\n  - Manipulations from `backend/components`.\n\n---\n\n### 🎨 **Frontend CSS**\n\nApplication CSS style files.\n\n- **Multiple Files:** Automatically compiled.\n- **Organization:** Organize files into subdirectories.\n\n---\n\n### 📜 **Frontend Files**\n\n- **Imports:** Use only frontend libraries.\n- **Organization:** Organize files into subdirectories.\n- **File Extensions:** Use `.ts` and `.js` files.\n- **Usage:** Free to make exports or calls (including asynchronous).\n- **Difference from Components:** Scripts are not automatically delivered to the\n  client. They need to be imported by the `frontend/components`.\n- **Purpose:** Group common functions/objects for React Functions/Components,\n  like form field validations. Can have `frontend/files` common to other\n  `frontend/files`.\n\n---\n\n### 🗂️ **Static**\n\nFiles served statically. Routes are generated based on the folder and file\nstructure.\n\n- **Example:** `localhost:8080/static/favicon.ico` matches `static/favicon.ico`.\n\n---\n\n## 🧭 **React Router**\n\nSince the framework has its own routing system, a third-party routing library is\nunnecessary. Use the framework helper:\n\n```typescript\nimport { getJSON, route } from \"@helpers/frontend/route.ts\";\n```\n\n### **Interface Parameters:**\n\n```typescript\ninterface Route {\n  headers?: Record\u003cstring, string\u003e; // When routing to a page, headers are encoded in the URL. Intercept them in ctx.url.searchParams in a backend/components file.\n  content?:\n    | Record\u003cany, any\u003e\n    | (() =\u003e Record\u003cany, any\u003e | Promise\u003cRecord\u003cany, any\u003e\u003e);\n  path: string;\n  startLoad?: () =\u003e void | Promise\u003cvoid\u003e;\n  endLoad?: () =\u003e void | Promise\u003cvoid\u003e;\n  onError?: (e: Error) =\u003e void | Promise\u003cvoid\u003e;\n  elSelector?: string; // Required for component routes.\n  method?: string; // Only for API routes. Optional; defaults to GET or POST.\n}\n```\n\n### **Examples**\n\n**Navigating to a Page with Search Params:**\n\n```jsx\n// URL search params passed as properties to the page. Props receive `{a:1}`\n\u003cbutton onClick={route({ path: \"/pages/test?a=1\" })}\u003e\n  Go to Test Page\n\u003c/button\u003e;\n```\n\n**Passing Additional Parameters:**\n\n```jsx\n// Props receive `{a:1, example:\"exampleStr\"}`\n\u003cbutton\n  onClick={route({\n    path: \"/pages/test?a=1\",\n    content: { example: \"exampleStr\" },\n  })}\n\u003e\n  Go to Test Page with Extra Data\n\u003c/button\u003e;\n```\n\n**Using Asynchronous Content:**\n\n```jsx\n// Props receive `{a:1, ...JSONResponse}`\n\u003cbutton\n  onClick={route({\n    path: \"/pages/test?a=1\",\n    content: async () =\u003e {\n      return await getJSON({\n        path: \"/example/json\",\n        content: {\n          test: \"testData\",\n        },\n      });\n    },\n  })}\n\u003e\n  Go to Test Page with Async Data\n\u003c/button\u003e;\n```\n\n**Programmatic Routing:**\n\n```typescript\n(async () =\u003e {\n  if (user.loggedIn) {\n    await route({\n      path: \"/pages/dash\",\n      content: { userId: user.id, token: token },\n    })();\n  } else {\n    await route({ path: \"/pages/users/login\" })();\n  }\n})();\n```\n\n**Loading a Component:**\n\n```jsx\n\u003cbutton\n  onClick={route({\n    path: \"/components/Counter\",\n    elSelector: \"#myAnotherCounter\",\n  })}\n\u003e\n  Load Counter Component\n\u003c/button\u003e;\n```\n\n**Making an API Call:**\n\n```jsx\n\u003cbutton\n  onClick={async () =\u003e {\n    const res = await getJSON({\n      path: \"/example/json\",\n      content: {\n        test: \"testData\",\n      },\n    });\n    console.log(res);\n    alert(JSON.stringify(res));\n  }}\n\u003e\n  Fetch JSON Data\n\u003c/button\u003e;\n```\n\n---\n\n## 📦 **Packages Included**\n\nSeveral packages are included to assist in developing React applications. Here\nare some examples of imports you can use without additional configuration:\n\n```typescript\nimport {/* your imports */} from \"react\";\nimport {/* your imports */} from \"react/\";\nimport {/* your imports */} from \"react-dom\";\nimport {/* your imports */} from \"react-dom/server\";\nimport {/* your imports */} from \"react-dom/client\";\nimport {/* your imports */} from \"react/jsx-runtime\";\nimport {/* your imports */} from \"render\";\nimport {/* your imports */} from \"htm/react\";\nimport {/* your imports */} from \"@helpers/frontend/route.ts\";\nimport {/* your imports */} from \"@helpers/backend/types.ts\";\n\n// **About Faster:**\n// Faster is an optimized middleware server with an incredibly small codebase (~300 lines), built on top of Deno's native HTTP APIs with no dependencies. It includes useful middlewares: log file, serve static, CORS, session, rate limit, token, body parsers, redirect, proxy, and handle upload. Fully compatible with Deno Deploy. Examples are available in the README. Faster's ideology: all you need is an optimized middleware manager; all other functionality is middleware. See more at: https://deno.land/x/faster\n\nimport {/* your imports */} from \"faster\";\n\nimport { options, server } from \"@core\"; // Useful for accessing the server instance.\n```\n\n---\n\n## 🛠️ **Creating a Project**\n\nYou can simply download this repository. Alternatively, use the command\n(requires `git` installed and configured):\n\n```bash\ndeno run -A -r \"https://deno.land/x/faster_react/new.ts\" myProjectFolder\n```\n\nCustomize and configure the server in `options.json`.\n\n---\n\n## 🚀 **Running a Project**\n\nExecute the command:\n\n```bash\ndeno task serve\n```\n\n---\n\n## 🌐 **Deploy**\n\n- **Install Deployctl:**\n\n  ```bash\n  deno install -A --global jsr:@deno/deployctl\n  ```\n\n- **Deploy Your Project:**\n\n  ```bash\n  deployctl deploy\n  ```\n\n- **Note:** For production, set `framework =\u003e \"dev\": false` in `options.json`.\n\n---\n\n## 📖 **References**\n\n\u003ca id=\"1\"\u003e[1]\u003c/a\u003e Dragana Markovic, Milic Scekic, Alessio Bucaioni, and Antonio\nCicchetti. 2022. _Could Jamstack Be the Future of Web Applications Architecture?\nAn Empirical Study._ In _Proceedings of the 37th ACM/SIGAPP Symposium on Applied\nComputing_ (SAC '22). Association for Computing Machinery, New York, NY, USA,\n1872–1881. DOI:\n[10.1145/3477314.3506991](https://doi.org/10.1145/3477314.3506991)\n\n\u003ca id=\"2\"\u003e[2]\u003c/a\u003e Brown, Ethan. _Web Development with Node and Express:\nLeveraging the JavaScript Stack_. O'Reilly Media, 2019. URL:\n[http://www.oreilly.com/catalog/9781492053484](http://www.oreilly.com/catalog/9781492053484)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazurespheredev%2Ffaster_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazurespheredev%2Ffaster_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazurespheredev%2Ffaster_react/lists"}