S'agit-il de deux façons distinctes de créer l'application ou peuvent-elles être utilisées ensemble?
Ils peuvent être utilisés ensemble.
Si nous pouvons l'utiliser ensemble, comment le faire - devons-nous dupliquer les mêmes éléments côté serveur et côté client? Ou, pouvons-nous simplement construire les parties statiques de notre application sur le serveur et les parties dynamiques du côté client, sans aucune connexion au côté serveur qui était déjà pré-rendu?
Il est préférable d'avoir la même mise en page rendue pour éviter les opérations de redistribution et de repeinture, moins de scintillement / clignotements, votre page sera plus lisse. Cependant, ce n'est pas une limitation. Vous pouvez très bien mettre en cache le html SSR (ce que fait Electrode pour réduire le temps de réponse) / envoyer un html statique qui est écrasé par le CSR (rendu côté client).
Si vous ne faites que commencer avec SSR, je recommanderais de commencer simple, SSR peut devenir très complexe très rapidement. Construire du html sur le serveur signifie perdre l'accès à des objets comme la fenêtre, le document (vous les avez sur le client), perdre la capacité d'incorporer des opérations asynchrones (prêtes à l'emploi) et généralement de nombreuses modifications de code pour rendre votre code compatible SSR ( car vous devrez utiliser webpack pour emballer votre bundle.js). Des choses comme les importations CSS, nécessitent vs importation commencent soudainement à vous mordre (ce n'est pas le cas dans l'application React par défaut sans webpack).
Le modèle général de SSR ressemble à ceci. Un serveur Express servant les demandes:
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));
}
Ma suggestion aux gens qui débutent avec SSR serait de servir du HTML statique. Vous pouvez obtenir le code HTML statique en exécutant l'application CSR SPA:
document.getElementById('root').innerHTML
N'oubliez pas que les seules raisons d'utiliser SSR devraient être:
- SEO
- Charges plus rapides (j'écarterais ceci)
Piratage: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
