In today's sprawling JavaScript ecosystem, Svelte was designed to be a simpler alternative to the React.js front-end framework, and SvelteKit follows the same path, setting out to be a backend framework like Next.js but with fewer headaches and even better support for dynamic content.

The new-ish SvelteKit 3.0 release candidate includes an experimental feature called remote functions that rethinks how data is delivered to the browser. 

“Remote functions make everything else look a bit clunky, including SvelteKit’s load functions and actions,” the project team enthused in the release candidate announcement page. 

A slender stack

U.K. journalist Rich Harris, then a graphics editor at the New York Times, released Svelte 1.0 in 2016 as a JavaScript component builder that didn’t carry all the boilerplate that lumbered React.js. He needed an easier way to build graphical components for NYT online stories. 

Unlike React, Svelte compiled its code ahead of time, and shipped to the user without much accompanying framework. The fact that Svelte builds components from standard HTML elements also lightens the cognitive overhead for the developer.

SvelteKit grew from Svelte to manage back-end chores, such as routing, rendering, and streamlining pages, all in a manner befitting Svelte’s simplicity. 

SvelteKit has been nipping at Next.js’ heels for a while. A recent benchmark found that SvelteKit’s Server Side Rendering (SSR) function returned an HTML payload three times smaller than Next.js for an equivalent product page — great news for performance-minded web shops.

SvelteKit’s remote functions is another method that minimizes overhead – one so radical that adherents say it could disrupt the landscape of remote procedure calls (RPCs). It has been an experimental release since SvelteKit 2.27, though the upcoming v3 will embrace remote functions alongside its traditional load functions as equals (assuming the remaining bugs are sorted).

Type-safe data fetching, no page refresh required

Remote functions provide a way for individual components on a web page to update their data from the server, without refreshing the page as a whole.

This limitation has been a real bummer for coders, who have had to come up with various ways around this issue, but their solutions have tended to be hacky and they often lose type safety in the process.

“This is our take on RPCs,” explained Vercel Svelte core developer Simon Holthausen, in a Svelte Society podcast. 

Server-side, SvelteKit does the typical RPC stuff: validating incoming data requests, querying the database or other data source, and routing the serialized results back to the requesting component. 

The remote function, written in JavaScript or TypeScript, and compiled beforehand into a lightweight client-side RPC wrapper, performs a fetch call to the server from within the component itself.  No special routing or additional boilerplate is required. 

“You don’t have to worry about where this code is running,“ said developer Scott Tolinski in an episode of a Syntax developer videocast enthusiastically entitled “SvelteKit has solved data loading.”

The videocast hosts offered as an example a case where all the content on a site is static, except for a footer on the bottom of each page, which requires updated information. 

With remote functions, the footer component fetches and refreshes its own server data directly, keeping the data fresh. Traditionally, this would require the whole page either to be marked as dynamic (computationally costly, slow to load) or require the developer to write a top-down route loader (more brainwork,  keystroking).  

“From within a normal Svelte component, you can just straight up import that query or mutation as a function, then call that function in your code,” Tolinski explained. 

The call is coming from within the client

To be fair, the maintainers of Next.js have also addressed part of this problem with Server Functions (formerly called Server Actions), which allow client components to invoke server-side mutations directly. However, unlike SvelteKit's remote functions, Next.js Server Functions were primarily designed for writing data rather than fetching or querying it.

Harris now works at Vercel, which sponsors Svelte but owns Next.js. Nonetheless, Vercel supports both approaches, each of which reflects “a broader convergence toward typed, server-side functions callable from the client,” a Vercel spokesperson told us. 

For Tolinski, though, the upside to Svelte’s remote functions is how seamlessly they fit into the overall Svelte framework. 

“I’m not saying no other RPC systems have done it as good as this, but it better be as good as this if you want me to use it,” he said. ®