Esto NO Es un Componente, ES una Vista, NO Es Modular: Laravel Inertia vs Livewire

Esto que tenemos NO es un componente en Laravel Inertia. Al menos, no es un componente per se en el contexto de nuestra aplicación.

¿A qué demonios me refiero?, te pudieras preguntar.

Te voy a dar aquí un poquito de contexto. Obviamente, esto es —como quien dice— una interpretación propia, una vez que uno ha desarrollado aplicaciones usando Laravel Inertia, que es justamente lo que estamos viendo.

Laravel, entre otras tecnologías, se asocia de cierta forma a ciertos conceptos, y uno de ellos es el de componente. Pero, otra vez, esto es más que todo una interpretación personal. Yo te voy a indicar por qué considero que esto no es un componente, sino simplemente una vista:

        <contact-layout>
           <general-form :errors="errors" :contactGeneral="contactGeneral"/>
           <company-form :contactCompany="contactGeneral.company"/>
        </contact-layout>

¿Pero… cómo que no es un componente?

Lo primero que tú pudieras decirme es:

“¡Mira, pero obviamente eso es un componente! ¡Es un bendito componente en Vue! ¿No lo estás viendo, por Dios?”

Y sí… el código anterior es un .vue, tenemos un componente que estamos importando, lo llamamos Contact, obviamente tiene su <template> y su parte de <script>. Por lo tanto, tú puedes decir con toda razón:

“Eso es un componente en Vue.”

Y sí, es correcto.

Pero...
Para que se entienda un poquito mi punto de vista (que como te digo te voy a comparar más adelante), es importante ver cómo se comportan tecnologías hermanas como Livewire e Inertia. Y por más odiosas que sean las comparaciones, hay que hacerlas.

¿A qué me refiero con esto? Que lo que estamos usando en Inertia, es directamente una vista.

Recordemos que una de las características principales que tenemos en Laravel Inertia es el uso de Vue, o mejor dicho, la posibilidad de usar Vue. Porque incluso, todavía podemos devolver una vista Blade en lugar de una vista Vue. Así de simple.

Desde las bases: componentes en Laravel

Para que se entienda aún más claramente mi punto, vamos a ir a las bases. En Laravel, los componentes usualmente se empleaban para definir, por ejemplo, botones. Es decir, elementos simples que no requerían lógica adicional.

Podíamos tener algo como:

1. Componentes anónimos, más organizados que una vista suelta.
2. Componentes con clase, que sí requerían algo de inicialización lógica.

Entonces, con esos conceptos claros, te pregunto:

¿Qué es lo que tú crees que tenemos en el código anterior?

Porque si nos fijamos bien, en Inertia estamos obligados a pasarle la data manualmente para que el componente funcione. Esto se debe a que, al ser tecnologías independientes, no hay una integración profunda, y probablemente nunca la haya.

Comparación con Livewire

En el ejemplo de Livewire:

@livewire('contact.company', ['parentId' => $pk])

Solamente le pasamos un identificador para construir el componente. Con ese ID, internamente se busca la clase relacionada:

    function mount($parentId)
    {
        $this->parentId($parentId);
    }


    function parentId($parentId)
    {
        $this->parentId = $parentId;
        $c = ContactCompany::where('contact_general_id', $this->parentId)->first();
        if ($c != null) {
            $this->name = $c->name;
            $this->identification = $c->identification;
            $this->extra = $c->extra;
            $this->choices = $c->choices;
            $this->email = $c->email;
        }
    }


    public function render()
    {
        return view('livewire.contact.company');
    }

 —que en este ejemplo podría ser ContactCompany—. Automáticamente, Livewire ejecuta el método mount, inicializa el componente, y tú no te preocupas por pasarle manualmente toda la data.

Mientras que en el caso de Inertia, además del ID, tienes que pasarle la instancia de la clase, que normalmente se construye en el método edit.

Conclusión

Entonces, en nuestro componente de Inertia (ese .vue que mostramos antes), estamos simplemente importando una vista y pasándole datos para inicializarla manualmente. No hay una instancia de componente Vue como tal con un ciclo de vida controlado desde el servidor.

Por eso es que no lo considero un componente como tal, sino simplemente una vista renderizada con datos.