Todos los proyectos nuevos usan esta arquitectura (basada en TanStack Start). Los proyectos existentes creados con la arquitectura anterior (Vite/React) siguen funcionando igual y no se migran automáticamente.
Las cuatro piezas
Ventajas
- Contenido renderizado en el servidor para visitantes, buscadores y redes sociales.
- Lógica privada fuera del código del navegador.
- Credenciales seguras guardadas como secretos.
- Integraciones externas mediante endpoints REST.
- Un solo proyecto para frontend y backend.
- Publicación integrada de la app y sus funciones de servidor.
- Compatibilidad: tus proyectos anteriores siguen funcionando sin cambios.
Cada pieza en detalle
Renderizado en el servidor (SSR)
El servidor genera el HTML de la página, así que buscadores, redes y navegadores reciben el contenido sin depender del JavaScript del navegador. Es especialmente útil para sitios de marketing, páginas de aterrizaje, sitios de varias páginas, páginas públicas con URL y metadatos propios, contenido orientado a buscadores y páginas que se comparten en redes.Funciones de servidor
Permiten que el frontend pida operaciones al servidor sin que el código quede expuesto en el navegador. Úsalas para:- Llamar a servicios externos con credenciales privadas.
- Cargar datos protegidos.
- Validar información enviada.
- Hacer cálculos del lado del servidor.
- Transformar datos antes de devolverlos al frontend.
APIs REST
Crean endpoints HTTP que otros sistemas pueden llamar, con rutas como/api/... y métodos como GET o POST. Sirven para recibir webhooks, conectar aplicaciones de terceros, crear APIs públicas o autenticadas, aceptar datos de otro servicio y devolver datos estructurados en JSON.
Secretos
Almacenamiento del lado del servidor para lo que nunca debe estar en el código del navegador: claves de API, tokens de autenticación, secretos de firma de webhooks, credenciales de integraciones y configuración privada.Función de servidor o API REST
Proyectos nuevos y existentes
No rehagas un proyecto solo porque exista la nueva arquitectura. Primero evalúa si de verdad necesitas SSR, lógica privada, endpoints REST o secretos.
Cómo construir una aplicación full-stack
1
Crea un proyecto nuevo
Abre AI Studio en el menú lateral, crea un proyecto y describe el sitio o la aplicación.
2
Describe el comportamiento completo
No te limites al diseño: menciona servicios externos, credenciales privadas, webhooks entrantes, procesos protegidos y APIs públicas. Ejemplo: “Crea un portal de estado de pedidos con una página pública, una consulta de cuenta privada que corra en el servidor y un endpoint para recibir webhooks de estado de pedidos”.
3
Agrega los secretos
Identifica cada credencial privada, agrégala cuando AI Studio te lo pida, ponle un nombre claro, úsala solo desde las funciones de servidor que la necesitan y prueba que nunca se devuelva al navegador.
4
Revisa las funciones de servidor
Verifica que el procesamiento sensible corra en el servidor, que las credenciales vengan de los secretos y que solo se devuelva lo necesario. Prueba solicitudes correctas y con errores.
5
Crea las APIs REST
Define la ruta, el método HTTP y el formato de la solicitud; agrega autenticación o validación de firma si hace falta; procesa en el servidor y devuelve la respuesta adecuada.
6
Prueba todo
Confirma que las páginas públicas cargan, prueba funciones y endpoints con datos esperados e inesperados, revisa que ningún secreto aparezca en lo que ve el navegador y que los errores se manejen de forma segura. Revisa también títulos, encabezados y metadatos.
7
Publica
Haz clic en Publicar, revisa la dirección del sitio, confirma y prueba la aplicación en vivo.
8
Conecta tu dominio
En Publicar → Agregar dominio personalizado, escribe el dominio, agrega los registros DNS en tu proveedor si se piden, haz clic en Verificar DNS, espera a que se emita el certificado y prueba la aplicación en tu dominio.
Consideraciones de SEO
Los proyectos nuevos usan renderizado en el servidor. Los anteriores siguen con su arquitectura y con las herramientas de SEO avanzado. En ambos casos, antes de publicar páginas importantes revisa títulos, meta descripciones, estructura de encabezados, URL canónicas, vista previa en redes, el mapa del sitio y el contenido renderizado en la página en vivo.Solución de problemas
Preguntas frecuentes
¿Mis proyectos existentes se pasan solos a la nueva arquitectura?
¿Mis proyectos existentes se pasan solos a la nueva arquitectura?
No. Siguen con su arquitectura actual y requieren una migración aparte.
¿Una función de servidor puede usar un secreto?
¿Una función de servidor puede usar un secreto?
Sí, es el uso más común cuando la lógica necesita una clave de API o un token privado.
¿Puedo crear endpoints para webhooks?
¿Puedo crear endpoints para webhooks?
Sí. Las rutas de API REST sirven como URL de retorno para proveedores de webhooks.
¿Puedo poner un secreto directamente en el código del frontend?
¿Puedo poner un secreto directamente en el código del frontend?
No. Las credenciales deben quedarse en secretos y usarse solo desde el servidor.
¿Puedo editar el código de backend generado?
¿Puedo editar el código de backend generado?
Sí, con el editor de código. También puedes descargar el código como ZIP.
Artículos relacionados
AI Studio
Guía completa del constructor con IA.
SEO avanzado
SEO para proyectos con la arquitectura anterior.