Guía para Principiantes sobre Funciones Remotas en SvelteKit

Has construido aplicaciones SvelteKit con endpoints +server.ts y acciones de formulario. Funcionan, pero estás escribiendo código repetitivo: analizando cuerpos de solicitud, validando entradas manualmente y manteniendo definiciones de tipos separadas para cliente y servidor. Las Funciones Remotas de SvelteKit ofrecen un enfoque diferente: llamadas al servidor con seguridad de tipos sin la ceremonia de los endpoints API tradicionales.

Esta guía explica qué son las funciones remotas, cuándo usar cada tipo y las compensaciones que debes entender antes de adoptarlas.

¿Qué Son las Funciones Remotas de SvelteKit?

Las funciones remotas te permiten escribir código del lado del servidor que los clientes llaman como funciones regulares. Detrás de escena, SvelteKit compila estas en endpoints HTTP y genera wrappers fetch para el cliente. Obtienes seguridad de tipos de extremo a extremo sin construir o mantener rutas API tradicionales.

Piensa en ello como SvelteKit manejando la infraestructura entre tu frontend y backend. Escribes una función en un archivo .remote.ts, y SvelteKit maneja la serialización, generación de endpoints e inferencia de tipos.

Si deseas la referencia oficial, esta característica está documentada en los docs de SvelteKit bajo Remote Functions: https://kit.svelte.dev/docs/remote-functions

Habilitando la Característica Experimental

Las funciones remotas requieren activación explícita mediante kit.experimental.remoteFunctions en tu svelte.config.js:

const config = {
  kit: {
    experimental: {
      remoteFunctions: true
    }
  }
};

export default config;

Si deseas usar await directamente en componentes Svelte, también necesitarás habilitar el soporte async experimental de Svelte por separado. Esto no es requerido—las funciones remotas funcionan sin él—pero simplifica el código de los componentes.

Los Cuatro Tipos de Funciones de Servidor de SvelteKit

Las funciones remotas vienen en cuatro variantes, cada una diseñada para casos de uso específicos.

Query: Obtención de Datos Dinámicos

Usa query cuando leas datos de bases de datos, APIs o cualquier recurso del servidor. Las queries pueden ejecutarse durante el renderizado del componente y son deduplicadas y agrupadas dentro del mismo ciclo de vida de renderizado.

import { query } from '$app/server';
import { db } from '$lib/db';
import { posts } from '$lib/schema';

export const getPosts = query(async () => {
  return await db.select().from(posts);
});

Para escenarios críticos de rendimiento, query.batch agrupa múltiples llamadas simultáneas en una única solicitud—resolviendo el problema n+1 sin optimización manual.

Form: Mutaciones de Datos con Mejora Progresiva

La función form maneja el envío de entradas de usuario. Su ventaja clave es la mejora progresiva. Los formularios funcionan sin JavaScript, recurriendo al envío tradicional cuando es necesario.

Distribuye el objeto retornado en tu elemento <form>, y SvelteKit maneja automáticamente tanto los envíos mejorados como los no mejorados.

Command: Mutaciones Flexibles

command funciona como form pero no está vinculado a elementos de formulario. Úsalo para clics de botones, acciones de arrastrar y soltar, o cualquier mutación desencadenada fuera del contexto de un formulario.

A diferencia de los formularios, los commands requieren JavaScript. Elige form cuando la mejora progresiva importa. Elige command cuando necesites flexibilidad.

Prerender: Datos Estáticos en Tiempo de Compilación

prerender obtiene datos durante la compilación, no en tiempo de ejecución. Los resultados se almacenan en caché en tiempo de compilación y se sirven a través de la caché de la plataforma o CDN. Usa esto para configuración, contenido CMS que cambia solo en el despliegue, o cualquier dato que no necesite actualizaciones en tiempo real.

Restricción importante: no puedes usar query en páginas completamente prerenderizadas, ya que las queries son inherentemente dinámicas.

Seguridad: Cada Función Remota Es un Endpoint Público

Esto es crítico de entender: cada función remota se convierte en un endpoint HTTP que cualquiera puede llamar. La validación de entradas no es opcional—es esencial.

SvelteKit espera que valides argumentos usando bibliotecas Standard Schema como Zod o Valibot (la iniciativa “Standard Schema” está documentada en https://standardschema.dev):

import { query } from '$app/server';
import * as v from 'valibot';
import { db } from '$lib/db';
import { posts } from '$lib/schema';

const Params = v.object({
  slug: v.string()
});

export const getPost = query(Params, async ({ slug }) => {
  return await db.select().from(posts).where(eq(posts.slug, slug));
});

Sin validación, los atacantes pueden enviar datos arbitrarios a tus endpoints. SvelteKit típicamente retorna errores de nivel 400 para fallos de validación, evitando la filtración de información.

Mantén SvelteKit Actualizado

Versiones pasadas tuvieron vulnerabilidades de seguridad que afectaban las funciones remotas, incluyendo problemas de DoS. Mantente al día con los lanzamientos, especialmente mientras la característica permanece experimental (a partir de SvelteKit 2.x).

Compensaciones a Considerar

Las funciones remotas reducen el código repetitivo pero no son mágicas. Considera estas restricciones:

• La ubicación del archivo importa: los archivos .remote.ts van en cualquier lugar en src excepto src/lib/server
• Caché de prerender: El almacenamiento en caché del navegador y CDN significa datos obsoletos hasta el redespliegue
• Estado experimental: Las APIs pueden cambiar y se esperan errores

Las funciones remotas funcionan mejor cuando deseas comunicación cliente-servidor con seguridad de tipos sin mantener definiciones de endpoints separadas. No son un reemplazo para cada archivo +server.ts—flujos de autenticación complejos o manejadores de webhooks de terceros podrían aún justificar endpoints tradicionales.

Cuándo Usar Cada Tipo de Función

Conclusión

Las Funciones Remotas de SvelteKit simplifican el límite entre el código cliente y servidor. Eliminan el mantenimiento manual de endpoints mientras proporcionan validación integrada y seguridad de tipos. Comienza con query para obtención de datos, agrega form para entrada de usuario, y recurre a command o prerender cuando esos patrones específicos se ajusten a tus necesidades.

La característica es experimental—espera cambios. Pero para desarrolladores de SvelteKit cansados del código repetitivo de endpoints, las funciones remotas ofrecen una alternativa convincente que vale la pena explorar.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.