Fluid websites as Single Page Applications

[rolyp]

With modern websites, when navigating to a new URL much of the page content seems to stay in place and only some of it visibly changes. This is usually because they have been built using web frameworks and client-side rendering techniques that allows them to only update specific parts of the page without fully reloading it. This approach is commonly known as partial page updates or client-side routing and is a hallmark of Single Page Applications (SPAs).

To provide a smooth UX, we will want something like this for Fluid websites (Fluid programs that are rendered as full websites with separate pages/components for subviews etc). However, we will most likely not want to use an existing web framework, but rather build something natively in JavaScript (perhaps using the History or PushState APIs supported by browsers). We could then potentially render a nested facet plot (#1068) as a website with an endpoint for each position in the hierarchy; with some further work to support headings and other structural components, this might be expressive enough to allow us to implement f.luid.org entirely in Fluid.

Further background

Client-Side Routing: Web frameworks like React, Vue, and Angular handle URL changes on the client side without requiring a full page reload from the server. When you navigate to a new URL, the JavaScript router intercepts the navigation request, updates the browser’s URL, and only loads the necessary content dynamically.

Partial DOM Updates: Instead of reloading the entire page, only the parts of the DOM that need to change (e.g., the main content area) are updated. The header, footer, and other static elements remain intact, providing a smoother UX.

Data Fetching and Component Rendering: Upon navigation, the framework may fetch new data or update components, which re-renders only the affected sections. The transition feels smooth because the browser avoids a full page reload and assets like JavaScript and CSS are already loaded.

Relevant Web Technologies

React Router in React
Vue Router in Vue.js
Angular Router in Angular
Next.js or Nuxt.js for hybrid server-client rendering
History API or PushState API to manage URLs without page reloads
Svelte/SvelteKit

See also:

• Deploy website via fluid command-line #1057
• Facet plot #1068
• URLs for selection states #983

[jacobpake]

I would add Svelte/SvelteKit to the relevant technologies list. I think their model of reactivity is really nice and the syntax for creating components is very similar to writing HTML directly.

Svelte was created by somebody working on interactive data visualisations for news articles. So support for D3 etc was good from the start.

[rolyp]

Thanks for the useful notes on some of these issues @jacobpake. Added to the list as suggested. It would be good to drive this feature by trying to use Fluid to implement the whole of f.luid.org or to create a presentation.