SvelteKit 3 puts heat on Next.js with radical approach to RPCs

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.