Il rendering lato server (SSR, Server-Side Rendering) è un approccio molto popolare per la creazione di applicazioni web. Nel contesto dell’SSR, il server restituisce una pagina HTML completamente formata al client browser che può quindi essere visualizzata quasi istantaneamente, migliorando i tempi di caricamento e l’indicizzazione da parte dei motori di ricerca.
Ecco come creare un’applicazione SSR con React JS:
1. Innanzitutto, è necessario installare React.js, ReactDOM e Express.js nel progetto. React e ReactDOM saranno utilizzati per creare componenti React mentre Express sarà utilizzato per creare il server.
Puoi installare queste dipendenze con npm o yarn: \`\`\` npm install —save react react-dom express \`\`\`1. Creare un nuovo file chiamato server.js nel tuo progetto. Questo file sarà utilizzato per configurare il tuo server Express.js.
In server.js, prima di tutto, importa le librerie necessarie: \`\`\`javascript import express from ‘express’; import React from ‘react’; import ReactDOMServer from ‘react-dom/server’; \`\`\` Poi, crea l’istanza del server Express: \`\`\`javascript const app = express(); \`\`\`1. Creare un nuovo file chiamato App.js nel progetto. Qui, definisci il componente App che vogliamo renderizzare lato server.
\`\`\`javascript import React from ‘react’; const App = () => { return1. Torna al file server.js e aggiungi il codice per il rendering lato server del tuo componente App. Puoi farlo utilizzando il metodo renderToString() fornito da ReactDOMServer.
\`\`\`javascript import App from ‘./App’; app.get(‘/\*’, (req, res) => { const app = ReactDOMServer.renderToString(1. Allora, inizia il tuo server Express.js e ascolta su una porta specificata:
\`\`\`javascript const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server is listening on port ${PORT}`); }); \`\`\`1. Puoi quindi avviare il tuo server utilizzando node o nodemon tramite il comando:
\`\`\` node server.js \`\`\`1. Apri il tuo browser e vai su:`http://localhost:3000`. Dovresti vedere il tuo primo componente React SSR.
Si prega di notare che l’esempio di cui sopra è una configurazione semplice SSR. Nella produzione reale, potrebbe essere necessario aggiungere una configurazione di webpack e babel.
Oltre a ciò, il rendering lato server con React.js può essere affrontato in modo piuttosto complesso a causa dell’handling dello stato, il routing, il fetching dei dati ecc. Pertanto, potrebbe essere necessario utilizzare alcune librerie o frameworks aggiuntivi come Next.js che facilitano il rendering lato server con React.js.
