Ik ben net begonnen ReactJS te bestuderen en ontdekte dat het je 2 manieren geeft om pagina’s weer te geven: server-side en client-side. Maar ik begrijp niet hoe ik het samen moet gebruiken. Zijn het 2 verschillende manieren om de applicatie te bouwen, of kunnen ze samen worden gebruikt?
Als we het samen kunnen gebruiken, hoe doen we dat dan – moeten we dezelfde elementen aan de server- en clientzijde dupliceren? Of kunnen we gewoon de statische delen van onze applicatie op de server bouwen en de dynamische delen aan de clientzijde, zonder enige verbinding met de serverzijde die al vooraf gerenderd was?
Antwoord 1, autoriteit 100%
Voor een bepaalde website / web-applicatie kunt u reageren op client-side, server-sideof beide.
Client-Side
Hier draait u ReactJS volledig in de browser. Dit is de eenvoudigste configuratie en bevat de meeste voorbeelden (inclusief die op http://reactjs.org). De oorspronkelijke HTML die door de server wordt weergegeven, is een tijdelijke aanduiding en de volledige gebruikersinterface wordt in de browser weergegeven zodra al uw scripts zijn geladen.
Serverzijde
Zie ReactJS hier als een server-side template engine (zoals jade, stuur, etc…). De HTML die door de server wordt weergegeven, bevat de gebruikersinterface zoals deze zou moeten zijn en u hoeft niet te wachten tot scripts zijn geladen. Uw pagina kan worden geïndexeerd door een zoekmachine (als deze geen javascript uitvoert).
Aangezien de gebruikersinterface op de server wordt weergegeven, zou geen van uw gebeurtenishandlers werken en is er geen interactiviteit (u heeft een statische pagina).
Beide
Hier staat de eerste render op de server. Daarom heeft de HTML die door de browser wordt ontvangen, de gebruikersinterface zoals deze zou moeten zijn. Zodra de scripts zijn geladen, wordt de virtuele DOM opnieuw gerenderd om de event-handlers van uw componenten in te stellen.
Hier moet je ervoor zorgen dat je exact dezelfde virtuele DOM (root ReactJS-component) opnieuw rendert met dezelfde propsdie je gebruikte om op de server te renderen. Anders zal ReactJS klagen dat de server-side en client-side virtuele DOM’s niet overeenkomen.
Omdat ReactJS de virtuele DOM’s tussen re-renders verdeelt, wordt de echte DOM niet gemuteerd. Alleen de event-handlers zijn gebonden aan de echte DOM-elementen.
Antwoord 2, autoriteit 49%
Bron afbeelding: Walmart Labs Engineering Blog
NB: SSR(Server Side Rendering), CSR(Client Side Rendering).
Het belangrijkste verschil is dat bij SSR, de reactie van de server op de browser van de client, de HTML van de pagina die moet worden weergegeven, wordt opgenomen.
Het is ook belangrijk op te merken dat, hoewel, met SSR, de pagina sneller wordt weergegeven. De pagina is pas klaar voor gebruikersinteractie als JS-bestanden zijn gedownload en de browser React heeft uitgevoerd.
Een nadeel is dat de SSR TTFB (Time to First Byte) iets langer kan zijn. Begrijpelijk, omdat de server enige tijd nodig heeft om het HTML-document te maken, wat op zijn beurt de respons van de server vergroot.
Antwoord 3, autoriteit 3%
Ik vroeg me eigenlijk hetzelfde af terwijl ik nogal wat onderzoek aan het doen was en hoewel het antwoord dat je zoekt in de reacties werd gegeven, maar ik vind dat het prominenter zou moeten zijn, daarom schrijf ik dit bericht (dat ik zal updaten zodra ik kan komen een betere manier bedenken omdat ik de oplossing architectonisch op zijn minst twijfelachtig vind).
Je zou je componenten moeten schrijven met beide manieren in gedachten, dus eigenlijk overal if-schakelaars plaatsen om te bepalen of je op de client of op de server zit en dan een van beide doen als DB-query (of wat dan ook op de server) of een REST-aanroep (op de client). Dan zou je eindpunten moeten schrijven die je gegevens genereren en deze blootstellen aan de klant en daar ga je.
Nogmaals, ik ben blij om te horen over een schonere oplossing.
Antwoord 4, autoriteit 2%
Is het 2 aparte manieren om de applicatie te bouwen, of kunnen ze samen worden gebruikt?
Ze kunnen samen worden gebruikt.
Als we het samen kunnen gebruiken, hoe moeten we dat dan doen – moeten we de . dupliceren?
dezelfde elementen aan de server- en clientzijde? Of kunnen we gewoon
bouw de statische delen van onze applicatie op de server, en de
dynamische delen aan de clientzijde, zonder enige verbinding met de server
kant die al vooraf was weergegeven?
Het is beter om dezelfde lay-out te laten renderen om reflow- en repaint-bewerkingen te voorkomen, minder flikkeren / knipperen, uw pagina zal vloeiender zijn. Het is echter geen beperking. Je zou heel goed de SSR-html kunnen cachen (iets Electrodedoet om de responstijd te verkorten) / stuur een statische html die wordt overschreven door de CSR (client-side render).
Als je net begint met SSR, raad ik aan om simpel te beginnen, SSR kan heel snel erg complex worden. HTML op de server bouwen betekent verlies van toegang tot objecten zoals venster, document (je hebt deze op de client), verlies van de mogelijkheid om asynchrone bewerkingen op te nemen (uit de doos), en over het algemeen veel codebewerkingen om je code SSR-compatibel te krijgen ( aangezien u webpack moet gebruiken om uw bundel.js in te pakken). Dingen zoals CSS-import, vereisen versus importeren beginnen je plotseling te bijten (dit is niet het geval in de standaard React-app zonder webpack).
Het algemene patroon van SSR ziet er als volgt uit. Een Express-server die verzoeken dient:
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));
}
Mijn suggestie aan mensen die beginnen met SSR zou zijn om statische html aan te bieden. U kunt de statische html verkrijgen door de CSR SPA-app uit te voeren:
document.getElementById('root').innerHTML
Vergeet niet dat de enige redenen om SSR te gebruiken moeten zijn:
- SEO
- Sneller laden (ik zou dit afwijzen)
Hack: https://medium.com/ @gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc