SvelteKit vs Next.js: Battle for Smaller HTML and Simpler Code

Depov

Moderator
Staff member
MODERATOR
ULTIMATE
SUPREME
PREMIUM
MEMBER
Joined
Feb 18, 2025
Messages
392
Reaction score
635
Deposit
0$
SvelteKit developers are preparing a major framework update and simultaneously promoting a new approach to data exchange between the browser and the server. The focus was on remote functions, allowing you to call server logic almost as ordinary functions directly from the components, maintaining typosecurity and saving the developer from manually creating API routes and additional code for fetch. The Svelte team considers remote functions together with the asynchronous capabilities of Svelte the future client-server interaction in the framework.

The Svelte team moved SvelteKit 3 to the Release Candidate stage on August 13, 2026. A stable release should follow after RC testing if developers do not detect issues that require new incompatible changes. Remote functions do not belong to the completely new features of the third version: the mechanism appeared in SvelteKit 2.27 and remains experimental. Developers warn of possible errors and API changes without prior notice.

Svelte appeared in 2016 thanks to the developer Rich Harris, who worked on interactive graphics for online publications. Unlike React, Svelte bet on the compilation of components during the assembly. A significant part of the work of the framework is performed in advance, and the browser receives compiled JavaScript instead of a large universal execution environment. Later around Svelte appeared SvelteKit, which added routing, server rendering, data download and other possibilities for creating full-fledged web applications.

SvelteKit’s comparisons to Next.js often concern not only the convenience of development, but also the amount of data transmitted. In the same page of the product published in August, KrabArena's benchmark was implemented on SvelteKit, Remix and Next.js. The median size of server HTML was 3115 bytes at SvelteKit, 3982 bytes at Remix and 9408 bytes at Next.js. As part of a particular test, SvelteKit formed about three times a smaller HTML response than Next.js. The result cannot be considered a universal proof of the superiority of one framework over another, since the response size depends on the application architecture, the functions used, and the testing conditions.


Remote functions solve another problem. Traditional architecture often forces the developer to separately create a server handler, determine the route, send a request through fetch, serialize data and follow the type match between the client and server part. According to SvelteKit documentation, the developer can declare a function in the file .remote.js or .remote.ts, then import the function into the component. On the server, the code remains a normal server function and can access the database, environment variables, and other closed resources. For the SvelteKit browser, automatically turns imports into a shell over fetch, accessing the generated HTTP point.

The approach is particularly useful for pages where most of the content remains static and a small component should receive fresh data. For example, a static page may contain a dynamic block at the bottom. The classic scheme may require a separate downloader or the transfer of data uploading upwards across the river of routes. Remote function allows you to place the query closer to the component that really needs data and update the result without completely reloading the page.

SvelteKit’s initial motivation just touched on the limitations load-functions. When using load page data is loaded in a separate file and then transmitted to the component through data. With a complex structure of the application, there is a connection between files, and small local queries have to be raised to the page or layout level. Reloading can also affect a larger dataset than a particular component requires. The developers have dealt in detail with such restrictions Discussion of remote functions.

SvelteKit offers four main types of remote functions. query designed to read dynamic server data, form serves the sending of forms, command performs recording operations out of reference to a specific form, and prerender receives static data during pregeneration. Function arguments can be checked through libraries compatible with Standard Schema, including Zod and Valibot.

Mechanism query received his own system of deduplication. SvelteKit serializes the query arguments and uses the result as the cache key. Several similar calls within a single server request do not force the application to do the same job again, and on the client the same calls use one instance of the request. Method refresh allows you to forcibly request a fresh version of data from the server.

Current documentation describes and query.batch, designed to combat the problem of N+1. Simultaneous requests within a single macro task are combined, so the server can process a set of arguments with a single access to the data source instead of a variety of individual operations.

Another possibility, query.live, designed for real-time data. The server function can return the asynchronous flow of values, and the client retains the connection while the result is used by the component. Several consumers of one live query share a connection, and after the breakage, SvelteKit tries to reconnect with exponential delay. During server rendering, SvelteKit uses the first value received, after which it transmits the initial state to the client when hydrating.

The name of the remote functions refers to the RPC, the remote call of the procedures. The developer calls a function from the client code, although the actual execution takes place on the server. SvelteKit hides the network layer, serialization and the creation of an HTTP point, but server functions are still actually becoming available through the network. The Svelte command therefore consciously requires placing remote functions in separate .remote-files and do not mix server code with the usual client module.

A similar task is solved by Next.js using React Server Functions. Server functions Next.js can also be called from the client via a network query, and in the context of data change, the name Server Actions is used. However, Next.js primarily describes Server Actions as a mechanism for changing data. To read information, Next.js actively uses Server Components and other download mechanisms.

The difference makes remote functions SvelteKit a more versatile abstraction for the direct operation of components with the server: query responsible for reading, form and command for changing the data, prerender for pre-calculated information, and query.live for streaming updates. Comparing the approach directly to Server Actions still needs to be careful, since Next.js offers a separate Server Components architecture to get data on the server.

The connection between the two competing ecosystems looks unusual. Svelte creator Rich Harris joined Vercel in 2021 to work on Svelte full-time. Vercel simultaneously develops Next.js and finances work on Svelte, while Svelte retains the status of an independent open source project.

Remote functions were not the only notable change of SvelteKit 3. RC transfers SvelteKit configuration to vite.config.ts, replaces the internal alias $lib the Standard Subpath Imports #lib, Simplifies the TypeScript configuration, reworks service worker, expands the environment variable mechanism and improves error handling. SvelteKit 3 also requires Svelte 5 and Vite 8, so the transition from the previous main version contains incompatible changes. For migration, the team prepared an automated team sv migrate, capable of performing a part of the transformations and forming a list of the remaining tasks.

Despite the confident tone of the developers, remote functions are still early to consider the final replacement load and form actions. The official announcement of SvelteKit 3 leaves the mechanism under the experimental flag while the team fixes the remaining problems. load-the functions continue to work, and production application developers will have to consider the possibility of further API changes. At the same time, the direction of development of SvelteKit has already been marked quite clearly: the team wants to make typical server functions called directly from the components, one of the main ways of connecting the browser with the server.
 
Top Bottom