Creare un’applicazione isomorfa con React.js è un compito relativamente complesso, ma estremamente benefico per il rendimento e l’ottimizzazione dei motori di ricerca.
I seguenti passaggi possono aiutarti:
1. Creazione del server:
Prima di tutto, dovrai creare un server, potresti fare uso di Express.js, un framework per Node.js, molto popolare e facile da usare.1. Routing:
Per la gestione del routing, puoi utilizzare React-Router. Puoi impostare un router sia sul client che sul server. Questo farà in modo che quando una richiesta arriva al server, React Router decidi quale componente renderizzare.1. Creazione di componenti React:
Creare componenti in React, tutto come normalmente si farebbe in un’app React.1. Rendering dal lato server:
La libreria ‘react-dom/server’ fornisce metodi DOM-specifici che possono essere utilizzati sul server. Il metodo da utilizzare qui è ‘renderToString()’, che renderizza il tuo componente React e lo restituisce come una stringa HTML.1. Inviare la pagina al client:
Ora avrai bisogno di creare un modello HTML base con un contenitore dove metterai la tua app React, e lo invierai al client. Dovresti includere lo stesso bundle.js che utilizzi sul lato client.1. Idraulizzazione sul lato client:
Una volta che il client riceve la pagina, dovresti montare la React app sullo stesso contenitore sul lato client. React riconoscerà che sta cercando di renderizzare la stessa app che è già presente sullo schermo e prenderà semplicemente il controllo dell’HTML già presente.Crea le API in Node.js e utilizza Flux o Redux per gestire lo stato dell’app per completare l’app isomorfa. Ricorda, è importante assicurarsi che il tuo stato iniziale dal server e dal client siano gli stessi.
Esempio di come potrebbe apparire in codice:
```
import React from ‘react’;
import { renderToString } from ‘react-dom/server’;
import { StaticRouter } from ‘react-router-dom’;
import App from ‘../shared/App’;
export default (req, res, next) => { const context = {}
const markup = renderToString(L’esempio sopra mostra un semplice server express con un unico endpoint che gestisce tutte le richieste. Su ogni richiesta, crea un nuovo StaticRouter con l’URL corrente, lo utilizza per effettuare il rendering dell’app, quindi invia l’HTML risultante al client. Nota l’utilizzo di ‘defer’ per posticipare l’esecuzione dello script fino a quando la pagina non è completamente caricata.
Ci sarebbero altri fattori da considerare, come ad esempio la gestione delle chiamate API, lo stato dell’applicazione, ecc. ma queste sono le basi per creare un’applicazione isomorfa con React.js.
