Rich Harris details Svelte's innovative handling of asynchronous operations, leveraging its compiler to redefine how Promises and async/await work within components, moving beyond traditional load functions. The core idea is "colocation" – bringing data fetching directly into components for better maintainability and type safety.
The Async Challenge: Web applications are inherently distributed and asynchronous, yet traditional component frameworks struggle with efficient async data management, leading to complex state management and poor user experiences (e.g., loading spinners, flickering UI) due to coarse-grained load functions and prop drilling.
Svelte's Compiler Power: Svelte uses its compiler to extend JavaScript syntax with new semantics. This allows features like reactive assignments, scoped CSS, and crucially, direct await usage in components, enabling parallel data fetching and synchronized UI updates, preventing flickering and race conditions.
Remote Functions & Data Management: The introduction of "remote functions" aims to replace SvelteKit's load functions, allowing data fetching logic to reside directly within components. These functions can be of different types:
Queries: For fetching data, with built-in caching and automatic invalidation.
Pre-render: To generate static data at build time, improving performance and reducing server load.
Forms & Commands: For handling client-to-server data submissions, supporting optimistic updates and type safety via schema validation.
Future Vision: Svelte's roadmap includes asynchronous server-side rendering (SSR), speculative rendering ("forking") for instant navigations, advanced caching strategies (server and client), automatic batching of requests, and real-time data streaming using server-sent events. This foundation also opens possibilities for embedded databases and enhanced internationalization.
Svelte's Master Plan for Asynchronous Operations
[
00:27:37
]
Introduction: A New Era for Asynchronous Svelte [00:00:00]
Rich Harris, creator of Svelte, introduces the topic of asynchronous operations in Svelte.
The presentation is a follow-up to a talk given in Barcelona called "What Svelte Promises."
A significant pull request, "feat: allow await in components #15844," was recently merged, marking a fundamental shift in Svelte's capabilities.
This feature enables direct use of Promises inside Svelte components.
The Problem: Web Apps and Asynchronous Data [00:01:48]
Web applications are inherently distributed systems.
Components and component frameworks have historically been poor at handling asynchronous operations.
Early component models (circa 2014-2015) predated native JavaScript Promises and Async/Await.
This led to developers managing local state for loading, values, and errors, resulting in complex code and poor user experiences (e.g., "spinners all over the page").
Frameworks attempted to solve this with loader functions (e.g., Next.js's getServerSideProps, SvelteKit's load function).
While frameworks can smartly serialize data and parallelize requests, these loader models have significant drawbacks:
Complexity for Typescript: Requires complex background processes and hidden directories for type inference.
Coarseness: Multiple independent data pieces often share one load function, requiring full invalidation even if only a small part changes.
Over-fetching: Leads to sending more data over the wire and more frequent database hits.
Prop Drilling: Data needs to be passed down through the component tree, even if only a deeply nested component needs it.
CMS Challenges: Difficult to dynamically load data for components whose presence depends on CMS-driven conditions, leading to over-fetching or manual data cleanup.
Conclusion: Loaders fundamentally do not scale for complex applications.
Svelte's Core Philosophy: Colocation and Compiler Magic [00:06:46]
Colocation is Good: The principle of keeping related code (HTML, CSS, JavaScript, data dependencies) together.
This improves maintainability and deletability, similar to how modern module imports replaced chaotic script management.
React Server Components (RSC): A React solution for colocation, but Svelte identifies trade-offs.
Critiques of RSC:
Chatty Protocol: Frequent server requests for even minor UI changes, leading to wasteful data transfer.
Mental Model Complexity: The distinction between server and client components is often difficult for developers to grasp.
Svelte's Secret Weapon: The Compiler: Svelte is a compiler, which gives it unique power to redefine language semantics.
Syntax ≠ Semantics: Svelte can use standard JavaScript syntax (e.g., assignments, function calls, await, using) and imbue them with custom, Svelte-specific reactive behaviors without requiring framework-specific APIs.
This leads to a more "idiomatic" experience despite the underlying "magic."
Examples of Compiler Magic:
Assignments: variable += 1 automatically updates all references.
Function Calls (Runes): Given magical powers for reactivity.
Scoped CSS: CSS rules apply only to the current component.
await: The compiler recognizes await statements and optimizes compilation for asynchronous behavior.
Svelte Playground with Web Worker Demo Code
[
00:19:21
]
using Keyword (Proposal): A new JavaScript proposal for explicit resource management, which Svelte can adapt to manage component lifecycle resources (e.g., clearing intervals when a component is removed).
Allows for automatic cleanup of disposable resources tied to component lifecycle.
Await Demos and Implementation Walkthrough [00:15:15]
await in Components:
Loading Data: Simple await calls to fetch data from an asynchronous function (e.g., a "multiply" API).
Await Used Directly in Svelte Component Script
[
00:35:16
]
Updates are synchronized: all promises resolve in the background, and the UI updates only once all synchronous and asynchronous data is ready, preventing flickering and inconsistent states.
Operations are parallelized, not sequential, optimizing performance.
Abort Signals: Prevents "flickering" UI when rapid input changes (e.g., typing in a search bar) lead to multiple, potentially outdated, fetch requests. Svelte automatically manages abort signals.
Web Workers: Offload expensive computations to a web worker, then await the result, keeping the main thread free.
Lazy Imports: Dynamically import components only when needed (e.g., a chat widget that appears on button press).
Image Preloading: Prevents "image flashing" by awaiting image load before rendering the component that uses them. All asynchronous image loading happens in parallel.
Implementation Walkthrough - The Batching System (Simplified) [00:21:29]
Svelte uses a "batching" mechanism to handle state updates efficiently.
When state changes, a "batch" is created, and a "flush" is scheduled after the next microtask (using queueMicrotask).
Multiple sequential state changes are grouped into the same batch.
Time Travel / Overlapping Batches: Svelte captures the old and new values to intelligently revert partial updates if a new, overlapping asynchronous operation begins before the previous one completes.
Effect Tree Traversal: During batch flush, Svelte traverses the "effect tree" (derived values, UI expressions).
User effects and render effects are "put aside" to avoid immediate DOM updates or unnecessary work until all asynchronous operations are settled.
Async effects (expressions with await) are also deferred to ensure they run with the latest values.
"Block effects" (e.g., if blocks, each blocks) run immediately as they might trigger more async work.
If no pending asynchronous work, all changes are committed to the DOM. Otherwise, the process waits for promises to resolve and then re-evaluates.
Functions in data.remote.ts (or similar convention) are accessible from both client and server.
Remote Functions File Structure in VS Code
[
00:31:56
]
Type Safety: Input validation (e.g., using Valibot or Zod) ensures type safety from server to client.
Standard Schema Website for Validation Libraries
[
00:34:36
]
Queries: Basic data fetching.
Pre-render: Functions can be explicitly marked for pre-rendering data at build time, served from CDN for speed and cost efficiency.
Allows pre-rendering of individual functions, even on otherwise dynamic pages.
Form Actions / Commands: Send data from client to server.
Forms work even without JavaScript.
Commands are non-form mutations (e.g., button clicks).
Single-Flight Mutations: Commands can specify which queries to refresh, avoiding unnecessary re-fetches.
Network Requests for Create and Get Summaries
[
00:39:24
]
Optimistic Updates: UI can update immediately, with automatic rollback if an error occurs.
"Dirty Tricks" (Implementation Details):
Client-side calls to remote functions are transformed into fetch requests by Vite plugins.
Svelte uses "home-made thenables" (objects with a .then() method) that JavaScript's await operator understands. This allows Svelte to control when reactivity occurs and synchronize multiple async operations.
Server-Side: Dynamic caching based on data characteristics (e.g., how old a "product" is for upvotes).
Hypothetical Server-Side Caching API Example
[
00:49:31
]
Will likely require an adapter API for platform-specific KV stores and opt-in due to cost.
Starts with HTTP cache control headers.
Client-Side: Easier to manage, can keep data in memory.
Queries referenced multiple times on the same page reuse data.
Leverage browser's Cache API for origin-scoped caching, enabling robust offline support without manual work.
Batching: Automatic grouping of multiple individual data requests (e.g., getTodo(id) calls) into a single, more efficient network/database request.
Real-time Capabilities:
Server-Sent Events (SSE): A simpler alternative to WebSockets for server-to-client streaming.
Svelte aims for an API where a server-side generator function yields new data, which clients can await as an async iterable.
Proposed Real-time Streaming API Example
[
00:53:58
]
Automatic reconnection on max duration limits.
Embedded Databases: Use WebAssembly builds of databases (e.g., PGlite for Postgres) for local development, providing a full production-like environment without complex setup.
In-progress State: Svelte provides effect.pending to track outstanding promises within a given boundary, enabling progress bars or loading messages. This is scoped to individual UI boundaries.
Effect Pending Demo in Svelte Playground
[
01:04:27
]
Errors: Error boundaries (like {@catch} blocks) can be used to display error messages and allow retries. SvelteKit will provide automatic error boundaries.
Key-based Invalidation: Currently, Svelte uses query-based invalidation (refreshing by calling the query function directly) rather than key/tag-based invalidation. The developers believe direct query references are more discoverable and safer.
Magic and Security: Explicitly defining remote functions in separate .remote.ts files helps developers remember they are public endpoints, preventing security hazards from accidental exposure of internal data (e.g., user IDs directly as arguments instead of from cookies). It also avoids complex lexical scope issues present in inline server functions in other frameworks.
Generator/Async Iterator Gotchas: If an awaited promise or async iterator never resolves, the related state update won't be applied. Svelte's approach aims to mitigate this with tooling to identify such issues, contrasting with other frameworks' reliance on "transitions" for all async state changes.
