Hyperactiv + react = ❤️⚡

Client & Server demo with SSR

📸 Demo

Hosted demo, with SSR and caching using hyperactiv/react.

What this demo is about

This demo is basically a website mining the json placeholder api.

While browsing the website, pay attention to the fact that:

Requests are cached by default and only replayed whenever needed
You can refetch data, and the loading state is handled
It is server side rendered
Mutating the store using the editable input fields or the console triggers a rendering

Setup

1 - Clone

git clone https://github.com/elbywan/hyperactiv-hooks-demo

2 - Install

pnpm i or npm i or yarn

3 - Profit

npm run dev

Dev mode, served by node.js on http://localhost:5001, with SSR and hot reload.

npm run build

Lint & Build the sources.

npm run prod

Prod mode, builds then starts the node.js backend that serves optimized HTML & JS using SSR on http://localhost:5001

4 - Play with the editable input fields, or the console

// The store is bound to window.__STORE__
// You can toy with it to see how it reflects in the components re-rendering.

// Examples:
__STORE__.posts[2] = {"userId":1,"id":2,"title":"Lorem ipsum","body":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
__STORE__.posts[1].title = "Hello"
delete __STORE__.__requests__['get@https://jsonplaceholder.typicode.com/posts?_page=1&_limit=20']