Entendiendo los componentes de Laravel Livewire, Ejemplo!

Por aquí quiero mostrarte algo que me pareció muy ilustrativo, para que entiendas exactamente cómo funcionan los componentes en Livewire y por qué realmente es una aplicación de tipo SPA (Single Page Application). Esto significa que no recarga toda la página, sino únicamente la parte que está cambiando, es decir, el componente con el cual estás trabajando. Al menos, claro, de manera básica.

Si tú haces uso del sistema de listeners para comunicar al padre, al abuelo, al bisabuelo, a la tía o al que sea, obviamente la cosa cambia. Pero me refiero al flujo normal, por así decirlo.

Tenemos un selector para el idioma. Fíjate que si cambio a “Español”, todo aparece en español:

<?php

namespace App\Livewire\User;

use Livewire\Attributes\Layout;
use Livewire\Component;

use Illuminate\Support\Facades\App;

#[Layout('layouts.web')]
class UserProfile extends Component
{

    public $language;

    public function render()
    {
        if (!isset($this->language)) {
            // al cargar el componente, este codigo se ejecuta al language NO estar seleccionado 
            // por el usuario
            $this->language = session('locale') ?? App::getLocale();
        } else {
            // se ejecuta desde la vista asociada por el .live
            session(['locale' => $this->language]);
            App::setLocale($this->language);
        }
        
        return view('livewire.user.user-profile');
    }
}

Y la vista:

<div class="max-w-md m-auto mycard">
    <div class="grid grid-cols-1 gap-2 my-3 mycard-body">
        <flux:input :label="__('Email')" value="{{ auth()->user()->email }}" disabled readonly/>

        <flux:input :label="__('Name')" value="{{ auth()->user()->name }}" disabled readonly />

        <flux:select :label="__('Language')" id="language" wire:model.live="language" x-data @change="setTimeout(function(){window.location.reload()}, 100)" class="mt-1 block w-full rounded border-gray-300">
            <option value="es">Español</option>
            <option value="en">English</option>
        </flux:select>

    </div>
</div>

Que es consumido mediante una ruta; adicionalmente, como puedes ver, el componente emplea un template llamado web.blade.php que tiene unos menus con textos a traducir.

Lo que hace el componente anterior, es establecer un nuevo idioma en la aplicación, al cambiar el select con el .live, hace que se REDIBUJE SOLO el componente. Si revisas el Network, verás que se hace una sola petición al servidor al cambiar el SELECT. Esto se logra usando wire:model.live, una funcionalidad muy útil si se usa inteligentemente (¡por favor, no lo pongas en todos los campos de texto porque vas a saturar el servidor!).

En este caso, tiene sentido para elementos como selects, donde quiero que se aplique un cambio de idioma en tiempo real.

¿Qué pasa realmente al cambiar el idioma?

Al cambiar el idioma, se ejecuta un método en el servidor (en Laravel, usando App::setLocale()), y le pasamos el nuevo idioma. En este ejemplo uso es para español y en para inglés. Ya tengo todas las traducciones configuradas desde el inicio del proyecto, así que se aplican inmediatamente.

El punto clave aquí es que SOLO recarga el componente, no toda la página. Esto lo puedes notar fácilmente porque al cambiar el idioma, el encabezado (parte del layout) no cambia, pero el contenido del componente sí.

¿Por qué es importante este comportamiento?

Esto es precisamente lo que pasa en una SPA: solo se actualiza la parte que realmente se necesita. Si yo quisiera que toda la página se recargara, podría emitir un evento al componente padre (o incluso al layout), pero en este caso no lo hice porque no era necesario. Tampoco creo que el usuario esté cambiando de idioma cada cinco segundos.