Sto iniziando a conoscere le applicazioni web reattive, e ho praticamente capito tutto dei componenti, del DOM virtuale, degli stati e altro ancora.
Prima di tutto, di solito non nomino una tecnologia, ma per semplicità userò ReactJS come esempio, ma sono sicuro che i concetti valgono anche per altre librerie / framework come VueJS e Angular.
Ora so che l'architettura più semplice da spiegare sarebbe la SPA (anche se sicuramente non la più facile da implementare), dal momento che l'architettura del sistema consiste di 2 applicazioni completamente diverse: una parte client (SPA) e il lato server (REST / Servizio GraphQL).
Con questo in mente, analizziamo come è l'architettura di un'applicazione reattiva non-SPA.
Dal mio punto di vista, essendo nuovo al paradigma dell'applicazione reattiva, direi che il rendering lato server sarebbe una opzione (sto parlando di architettura monolitica, rendering lato server. Pensa a un progetto MVC) . In questa architettura il server renderebbe le viste in HTML e quei file HTML avrebbero il JS inline o embed. Tuttavia, quando cerco di implementarlo, mi rendo conto che questo non ha alcun senso come nelle app reattive che non si suppone debbano rendere HTML (vista da MVC) e incorporare JS in esso; ma è il contrario, modello HTML INSIDE i componenti JS.
Quindi ora sono confuso. Potrei sbagliarmi con la mia precedente affermazione sul rendering lato server che non ha alcun senso, ma non riesco a vedere come sono inesperta con le app reattive.
Quindi, qual è l'architettura di un'applicazione reattiva non-SPA, che consumerebbe un servizio REST / GraphQL per popolare i dati nel suo componente?
Aggiornamento:
Ho fatto ricerche dal giorno in cui ho postato la domanda e oggi, e penso che la mia confusione risieda principalmente nella possibilità di raggruppare le cose.
Non riesco a pensare ad un modo di collegare un componente ItemList a un elemento DOM, che non implichi l'utilizzo di un Id come <div id="item-list"> e quindi convince che lo stesso id non si ripeta nel resto del codebase in modo che non venga attaccato lì per sbaglio.
Il mio componente è definito in ItemList.js e l'ultima riga sarebbe render(<ItemList />, 'item-list'); Se elaboro quel file con webpack in un bundle.js che viene importato nel file di layout principale, ogni vista nell'app tenterà per collegare il mio componente a detto elemento DOM. Ecco dov'è la mia confusione.