DEV Community

Cover image for Hybrid Architecture: Fast Server Rendering Transitioning to Reactive SPA with Dual Response
Erlangga Satria
Erlangga Satria

Posted on

Hybrid Architecture: Fast Server Rendering Transitioning to Reactive SPA with Dual Response

#webdev #architecture #opensource #javascript

I am currently working on an open-source web app store project. It utilizes a hybrid architecture: a fast server-side rendering (SSR) engine that is subsequently taken over by a lightweight JavaScript program on the client side to become a reactive Single Page Application (SPA).

This approach is backend-agnostic and can be implemented using PHP, Go, Ruby, Node.js/Express, or any other server-side language.

Why This Approach?

  1. SEO & First Load (MPA): By default, the application behaves as a Multi-Page Application (MPA). Users and Search Engine Bots immediately receive pure HTML. This practice has been proven solid for over two decades—ensuring a blazing-fast first load, minimal blocking time, and excellent crawlability.
  2. Seamless SPA Transition: After the initial HTML is loaded, a lightweight JavaScript library takes over the DOM. Subsequent interactions do not trigger full page reloads, updating the UI reactively instead.
  3. Dual Response Controller: On the server side, every route is configured to handle dual responses. If the request comes from a hard refresh or a bot, the server responds with HTML. If the request originates from in-browser SPA navigation, the server responds with JSON.
  4. Security Without Client-Side JWT: For sessions and authentication, this architecture relies entirely on HTTP-only cookies. No JSON Web Tokens (JWT) are exposed or stored on the client side (e.g., in localStorage), inherently mitigating token theft via XSS attacks.

Architecture Flow Diagram 

[ Client / Browser ]
        │
        ├─► (1) Initial Request / Search Engine Bot
        │       │
        │       ▼
        │   [ Server ] ──(Response: Full HTML)──► Render MPA
        │       ▲                                   │
        │       │                                   ▼
        │       │                          JS Takeover DOM (Reactive)
        │       │                                   │
        ├─► (2) SPA Navigation / User Interaction   │
                │                                   │
                ▼                                   │
          [ Fetch API ] ──(AJAX Request)──────► [ Server ]
                                                   │
                                          (Dual Response Controller)
                                                   │
                                                   ▼
                                         (Response: JSON Data)
                                                   │
                                                   ▼
                                          Partial DOM Update
Enter fullscreen mode Exit fullscreen mode

The Client Library: HTMP

To handle reactivity on the client side, this project uses HTMP

  1. Size: Extremely lightweight, only 3.8KB (gzip).
  2. Dependencies: Zero dependencies, purely leveraging native Web APIs.
  3. SPA Routing: Runs smoothly using the native fetch and history APIs.
  4. Extreme Performance: Capable of handling a reactive table with 1,000 rows in just 150ms. Testing is specifically targeted at low-end Android phones (the lowest variants of Redmi, Realme, Vivo, Oppo, and Samsung) to ensure the application remains highly responsive across all device spectrums. Just try benchmark on your current device.

Let's Discuss!

This project is in active development in my desk and plan to fully open source. Are you interested in joining as a contributor? Or do you have any feedback, critiques, or insights regarding the Dual Response architecture and the MPA-to-SPA transition?

Feel free to leave a comment below!

Top comments (0)