Visión general
Laravel es un framework de backend, pero también da mucha importancia a la experiencia de desarrollo que incluye el frontend.En Laravel 13 se ofrecen tanto formas de trabajar centradas en PHP como formas que aprovechan frameworks de JavaScript como React, Vue o Svelte. Para elegir el enfoque adecuado ayuda pensarlo en estos tres puntos:
- ¿Quieres escribir la UI principalmente en PHP?
- ¿Quieres escribir la UI principalmente en JavaScript / TypeScript?
- ¿Quieres tener todo en un solo repositorio, o separar API y SPA?
Enfoque desde PHP
Blade
Blade es el motor de plantillas estándar de Laravel. Devuelves vistas desde controladores o rutas, y el navegador recibe el HTML generado en el servidor. Ventajas- Se integra de forma natural con el enrutamiento, la validación y la autenticación de Laravel
- Se puede resolver casi todo con solo PHP, con una curva de aprendizaje baja
- Va bien con páginas centradas en SEO o en la primera carga
- Es fácil que cada navegación o envío de formulario provoque un repintado completo de la página
- Las interacciones complejas requieren apoyarse en JavaScript
Livewire
Laravel Livewire es un enfoque que, apoyándose en Blade, permite implementar UIs más dinámicas manteniéndose en PHP. Puedes construir interacciones como modales, búsquedas o edición en línea con una experiencia cercana a React o Vue. Ventajas- Se pueden crear UIs dinámicas como una extensión de PHP y Blade
- Se conecta bien con la gestión de estado y la validación de Laravel
- Se combina fácilmente con Alpine.js si solo quieres añadir un poco de JavaScript en puntos concretos
- No maneja tan bien como los frameworks JavaScript el estado complejo del lado del cliente
- Puede no ser adecuado para SPAs de gran tamaño con mucha lógica en el frontend
Starter kits centrados en PHP
Los starter kits de Laravel 13 incluyen una opción basada en Livewire para equipos que quieren construir UIs dinámicas manteniéndose en PHP. También puedes empezar solo con Blade, pero la opción “PHP-first” preparada como starter kit es Livewire. Al traer ya listos autenticación, layout y la configuración de Vite, permite empezar a desarrollar en el menor tiempo posible.Uso de un framework JavaScript
Inertia + React / Vue / Svelte
Inertia es el puente que te permite mantener las rutas, controladores y la autenticación de Laravel mientras construyes los componentes de página con React, Vue o Svelte. No se separan por completo el servidor API y la SPA; puedes construir una UI moderna dentro de una única aplicación Laravel. Ventajas- Puedes aprovechar el modelo de componentes de React / Vue / Svelte
- Enrutamiento y autenticación pueden dejarse del lado de Laravel
- Es fácil gestionar backend y frontend en un solo repositorio
- Hay más elementos que aprender que en una configuración solo con Blade
- Suele requerir conocimientos de la cadena de herramientas Node.js y de TypeScript
Separar la API y una SPA independiente
También puedes elegir una configuración en la que el frontend está totalmente separado de Laravel y una SPA o app móvil consume la API. Es útil cuando varios clientes deben compartir el mismo backend. En este escenario, Laravel se ocupa principalmente de:- Exponer rutas de API
- Autenticación y autorización (por ejemplo, Sanctum)
- Dar forma a las respuestas JSON (por ejemplo, con Eloquent API Resources)
- Es fácil desplegar hacia varios clientes: web, móvil, escritorio, etc.
- Puedes desacoplar la elección tecnológica del frontend respecto al núcleo Laravel
- Autenticación, obtención de datos y despliegue deben diseñarse por separado
- Suele ser más complejo que una configuración autocontenida en una sola aplicación Laravel
Starter kits centrados en JavaScript
Al usar los starter kits partes con Inertia, React / Vue / Svelte, Tailwind CSS y Vite ya integrados. Como también incluyen las pantallas de autenticación, es más fácil centrarse en el desarrollo de la UI.Empaquetar los assets con Vite
Elijas el enfoque que elijas, en Laravel 13 normalmente se compilan CSS y JavaScript con Vite. Con Blade y Livewire lo usarás para scripts y estilos ligeros; con Inertia, para todo el código frontend de la aplicación. Las ventajas de usar Vite son:- HMR rápido durante el desarrollo local
- Empaquetado y versionado de los assets para producción
- Integración con la directiva
@vite()de Laravel
Los starter kits de Laravel 13 vienen preconfigurados con una configuración frontend basada en Vite.
Comparativa de enfoques
| Enfoque | Casos adecuados | Ventajas | Desventajas |
|---|---|---|---|
| Blade | Páginas centradas en contenido, paneles de administración basados en formularios | Sencillo y fácil de aprender. Integración natural con las funciones estándar de Laravel | En UIs avanzadas aumentan los repintados de página completos |
| Livewire | Aplicaciones de negocio con UI dinámica manteniéndose en PHP | Permite construir UIs reactivas sin salir de PHP | El estado complejo del lado del cliente le cuesta más |
| Inertia + React / Vue / Svelte | Aplicaciones que quieren compatibilizar UI moderna y operación unificada con Laravel | Permite construir experiencias tipo SPA en un único repositorio | Requiere dominio de JavaScript / TypeScript |
| API + SPA independiente | Productos con varios clientes o integración móvil | Facilita desplegar el frontend de forma independiente | Autenticación, despliegue y operación tienden a volverse más complejos |
Próximos pasos
Plantillas Blade
Repasa los fundamentos del server-side rendering.
Starter kits
Compara las configuraciones iniciales de React, Vue, Svelte y Livewire.
Empaquetado de assets con Vite
Aprende el flujo del servidor de desarrollo, HMR y build de producción.
Introducción a Inertia
Descubre cómo Inertia conecta Laravel con los frameworks JavaScript.