Quali sono i vantaggi in termini di prestazioni dell'uso di React Router rispetto al routing lato server?

Ci sono 2 modi principali in cui le applicazioni web si comportano oggi:

• Un utente va all'url /page/1, un router lato server lo raccoglie, analizza i suoi dati (l'utente vuole la pagina #1), poi il server rende l'HTML statico sul server per la pagina #1 e invia quel contenuto HTML completo all'utente. Non c'è bisogno di alcun JavaScript da eseguire sul lato client in questo caso.
• Un utente va all'url /page/1, il server invia un documento HTML vuoto e un file JavaScript. Il file JavaScript sul client analizzerà la posizione dell'url, e genererà dinamicamente l'HTML relativo alla pagina 1 sul client usando JavaScript.

Suppongo che tu lo sappia già, sto solo stabilendo una linea di base.

Quello che succede dopo è la parte più interessante:

Assumiamo che il contenuto della pagina #1, abbia un link per andare a /page/2, qui si hanno 2 opzioni radicalmente diverse:

• Ritornare al server e chiedere un nuovo documento HTML completo per la pagina #2
• Con Ajax, chiedere al server solo i dati per la pagina #2, e usare JavaScript per sostituire il contenuto della pagina#1 con un nuovo contenuto che si genera dinamicamente con JavaScript.

Tornare al server e chiedere un file HTML nuovo di zecca è molto molto più lento che chiedere solo i dati e generare il contenuto sul front-end. Dovresti sicuramente fare la seconda, che è dove librerie come react-router brillano.

React router ti aiuta a definire dichiarativamente cosa dovrebbe essere reso su ogni pagina, e si occupa di gestire il cambiamento dell'URL (quando l'utente clicca su /page/2, per esempio). Se stai usando JavaScript per sostituire il contenuto della pagina, dovrai anche aggiungere un record nella cronologia del browser in modo che l'utente possa cliccare indietro per tornare a /page/1. react-router rende questo processo un po' più semplice.

Ora pensa a cosa dovrebbe succedere quando un altro utente apre il suo browser e va direttamente a /page/2, ripasseremo tutte le opzioni.

Tuttavia, dato che abbiamo Node.js, possiamo riutilizzare le rotte che definiamo sul client e renderle la fonte di ciò che dovrebbe accadere sul server. react-router non può lavorare da solo sul server però, quindi di solito, si avrà un web server come express che avvia il codice di routing, e delega a react-router per riutilizzare le stesse rotte definite per il frontend. In questo modo si ottiene il meglio di entrambi i mondi, l'utente che va direttamente a /page/2 sarà servito lato server, e l'utente che clicca su /page/2 form page #1 sarà servito lato client, che è molto più veloce.

Spero che questo aiuti.

Creo corsi online per Pluralsight, Lynda, e Packt. Il mio prossimo corso Lynda riguarderà lo sviluppo JavaScript full stack con Node e React, ma non è ancora uscito, tieni d'occhio il mio social stream per ricevere una notifica, o iscriviti ai miei aggiornamenti Coding Digest su CodingDigest.com

Seguimi su Twitter @samerbuna e su Medium a EdgeCoders.com