Last CallLast Call Pool
Web standards

Remix: Embracing Web Standards to Redefine Modern Web Development

September 5, 2023 2:45 PM
Long Lecture
🇬🇧 English
CMYK

About

Discover the power of Remix, a groundbreaking library that embraces web standards to redefine modern web development.As developers grapple with complex tools and frameworks, creating performant and maintainable applications becomes increasingly challenging.What if there's a solution that leverages core web principles to streamline development?Enter Remix In this talk, learn how Remix harnesses web standards, such as URLs, Fetch API, HTML, and HTTP caching, to elevate developer and user experiences, ultimately empowering you to become a better developer!

Talk by

Photo of Alexandra Spalato, Developer Relations Engineer at Storyblok.com
Alexandra Spalato
Developer Relations Engineer at Storyblok.com

Watch the full talk

Watch this WaysConf session, then continue with related talks or explore the current programme.

Explore the 2026 agendaMore WaysConf recordings
From the recording

Talk in brief

At WaysConf 2023, Alexandra Spalato, Developer Relations Engineer at Storyblok, presents how the Remix framework leverages core web standards to reframe modern web development. Spalato traces the evolution from early server-side rendering to client-side single-page applications, outlining common issues like framework fatigue, scalability bottlenecks, and complex state management. She introduces Remix as a full-stack React framework that returns to foundational web primitives—specifically URLs for nested routing, the Fetch API for server loader context, HTML forms for data mutations, and HTTP Cache-Control headers for performance optimization. Through a live code demonstration connecting Remix with Storyblok CMS, Spalato illustrates how standard HTML GET form submissions and the native URLSearchParams interface streamline global search features. She demonstrates that using Remix's native useNavigation hook replaces brittle custom React state management when building pending loading indicators. Ultimately, Spalato emphasizes that building applications around web standards reduces unnecessary abstractions, improves performance, and equips developers with transferable skills that outlast specific framework trends.

Key takeaways

  1. 01

    Remix Aligns Development with Standard Web APIs

    By building directly on browser and HTTP specifications such as URLs, Fetch, and HTML forms, Remix eliminates proprietary framework abstractions. Developers improve their foundational web skills rather than learning transient framework APIs.

    Watch from 4:00
  2. 02

    HTML Forms and Loaders Streamline Data Handling

    Remix uses standard form submissions tied to server-side action functions and automatically revalidates page loaders after data mutations. This workflow ensures client views remain synchronized with updated server data without full page reloads.

    Watch from 8:05
  3. 03

    HTTP Caching Delivers Immediate Performance Gains

    Route modules in Remix can directly export Cache-Control headers to instruct browsers on caching responses for specified durations. This native browser mechanism reduces server overhead and accelerates page load times for end users.

    Watch from 10:07
  4. 04

    Native HTML GET Forms Simplify Search Workflows

    Rather than managing search input in React state and executing custom POST redirects, developers can rely on default HTML GET forms that target search result routes directly. This native pattern automatically serializes query parameters into the URL.

    Watch from 16:20
  5. 05

    The useNavigation Hook Manages Pending UI States Effortlessly

    Remix provides the useNavigation hook to track form submission states without requiring localized React state variables. Developers can easily trigger loading overlays or optimistic UI updates while asynchronous data fetching completes.

    Watch from 20:41
Read edited transcript highlights

These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.

Bridging Server-Side Rendering and Modern Client Interfaces

In her presentation at WaysConf 2023, Alexandra Spalato discusses how web development evolved from traditional server-side template rendering to universal JavaScript frameworks. While client-side frameworks improved interactivity, they introduced complexity and performance overhead. Remix addresses these challenges by merging React user interfaces with server-side framework principles. By leaning heavily on native web standards like URLs, Fetch, and HTML form handling, Remix enables applications to scale dynamically down to basic HTML when client JavaScript is absent or limited.

Watch from 2:58

Utilizing URLs and Fetch APIs for Data and Layout Management

Spalato explains that Remix treats URLs as structural foundation blocks rather than simple web addresses. URL path segments correlate directly with nested layout components in the user interface, allowing Remix to collocate data loading with visual component definitions. By leveraging the web-standard Fetch API inside server loaders, Remix fetches data specifically for changed layout segments during navigation. Additionally, prefetching linked resources on hover ensures seamless client transitions while minimizing unnecessary server calls.

Watch from 5:36

Declarative Browser Caching via Route Headers

The speaker highlights how Remix incorporates standard HTTP caching mechanisms to boost application performance and reduce server strain. Developers can define cache control directives directly inside route module header exports, such as setting a max-age directive of 300 seconds. This approach instructs client browsers to reuse cached responses for up to five minutes before revalidating with the server, providing fast response times while relying on MDN-documented HTTP standards instead of proprietary caching layers.

Watch from 9:48

Unlearning React Habits for Standard Form Behavior

During a live demonstration of a global search feature integrated with Storyblok CMS, Spalato illustrates how framework habits often cause developers to overcomplicate basic browser tasks. She initially built a search form using React state, POST submissions, and manual server redirects. By refactoring to native web conventions, she demonstrated that a default HTML form with a GET method automatically appends query parameters to the target URL, eliminating the need for server actions or custom redirect logic.

Watch from 16:20

Eliminating State Synchronization with Navigation Hooks

Spalato addresses common pitfalls when building search overlays and pending UI indicators in Remix. Rather than manually tracking UI visibility with React useState and effect hooks, she shows how to leverage Remix's built-in useNavigation hook. By checking whether the navigation state is active and verifying the target route path, developers can automatically render searching indicators and close modals upon completion. This declarative approach avoids state sync bugs and simplifies component maintenance.

Watch from 20:41

Server-Side Query Construction with Standard Web APIs

To complete the global search feature, Spalato demonstrates how server loaders process incoming request parameters. Using the standard Web URL constructor and URLSearchParams utility inside the loader, the application extracts search terms directly from the request object. The server then queries Storyblok's content delivery API using logical OR operators and wildcard filters to retrieve matching posts and pages before passing the filtered dataset back to the React component via useLoaderData.

Watch from 22:26
Explore WaysConf 2026

View the agenda

Get tickets