Sono 2 modi separati per creare l'applicazione o possono essere usati insieme?
Possono essere usati insieme.
Se possiamo usarlo insieme, come farlo: dobbiamo duplicare gli stessi elementi sul lato server e sul lato client? Oppure, possiamo semplicemente costruire le parti statiche della nostra applicazione sul server e le parti dinamiche sul lato client, senza alcuna connessione al lato server che era già pre-renderizzato?
È meglio che venga eseguito il rendering dello stesso layout per evitare operazioni di ridisposizione e ridisegno, meno sfarfallio / lampeggiamento, la pagina sarà più fluida. Tuttavia, non è una limitazione. Potresti benissimo memorizzare nella cache l'SSR html (qualcosa che Electrode fa per ridurre i tempi di risposta) / inviare un html statico che viene sovrascritto dal CSR (rendering lato client).
Se stai appena iniziando con SSR, ti consiglierei di iniziare in modo semplice, SSR può diventare molto complesso molto rapidamente. Creare html sul server significa perdere l'accesso a oggetti come finestra, documento (li hai sul client), perdere la capacità di incorporare operazioni asincrone (pronte all'uso) e generalmente molte modifiche al codice per rendere il tuo codice compatibile SSR ( poiché dovrai usare webpack per impacchettare il tuo bundle.js). Cose come importazioni CSS, require vs import iniziano improvvisamente a morderti (questo non è il caso dell'app React predefinita senza webpack).
Lo schema generale dell'SSR è simile a questo. Un server Express che serve le richieste:
const app = Express();
const port = 8092;
// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
console.log('fullUrl: ', fullUrl);
console.log('req.url: ', req.url);
// Create a new Redux store instance
const store = createStore(reducerFn);
const urlToRender = req.url;
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<StaticRouter location={urlToRender} context={{}}>
{routes}
</StaticRouter>
</Provider>
);
const helmet = Helmet.renderStatic();
// Grab the initial state from our Redux store
const preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(helmet, html, preloadedState));
}
Il mio suggerimento alle persone che iniziano con SSR sarebbe di fornire HTML statico. Puoi ottenere l'html statico eseguendo l'app CSR SPA:
document.getElementById('root').innerHTML
Non dimenticare, gli unici motivi per utilizzare SSR dovrebbero essere:
- SEO
- Caricamenti più veloci (lo sconto questo)
Hack: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
