Server Side Rendering with React

Campul JavaScript Full-Stack Bootcamp 2021 este ACUM DESCHIS PENTRU ÎNSCRIERI!

Server Side Rendering, numit și SSR, este abilitatea unei aplicații JavaScript de a reda pe server mai degrabă decât în browser.

De ce am dori vreodată să facem acest lucru?

• permite ca site-ul dvs. să aibă un timp de încărcare a primei pagini mai rapid, ceea ce reprezintă cheia unei bune experiențe a utilizatorului
• este esențial pentru SEO: motoarele de căutare nu pot (încă?) indexa eficient și corect aplicațiile care se redau exclusiv pe partea clientului. În ciuda ultimelor îmbunătățiri aduse indexării în Google, există și alte motoare de căutare, iar Google nu este oricum perfect la acest capitol. De asemenea, Google favorizează site-urile cu timpi de încărcare rapizi, iar faptul că trebuie să se încarce client-side nu este bun pentru viteză
• este grozav atunci când oamenii distribuie o pagină a site-ului dvs. pe rețelele de socializare, deoarece pot aduna cu ușurință metadatele necesare pentru a distribui frumos link-ul (imagini, titlu, descriere…)

Fără Server Side Rendering, tot ceea ce livrează serverul dvs. este o pagină HTML fără corp, doar câteva etichete de script care sunt apoi folosite de browser pentru a reda aplicația.

Aplicațiile redate de client sunt grozave la orice interacțiune ulterioară a utilizatorului după încărcarea primei pagini. Server Side Rendering ne permite să obținem punctul dulce de la mijlocul dintre aplicațiile randate de client și aplicațiile randate de backend: pagina este generată pe server, dar toate interacțiunile cu pagina după ce a fost încărcată sunt gestionate pe client.

Cu toate acestea, Server Side Rendering are și dezavantajul său:

• este corect să spunem că o simplă dovadă de concept SSR este simplă, dar complexitatea SSR poate crește odată cu complexitatea aplicației dumneavoastră
• Renaturarea unei aplicații mari pe partea serverului poate fi destul de intensivă din punct de vedere al resurselor, iar în condiții de încărcare intensă ar putea chiar să ofere o experiență mai lentă decât redarea pe partea clientului, deoarece aveți un singur gât de gâtul de îmbulzeală

Un exemplu foarte simplist a ceea ce este necesar pentru a reda o aplicație React din partea serverului

Configurările SSR pot deveni foarte, foarte complexe și majoritatea tutorialelor vor încorpora de la început Redux, React Router și multe alte concepte.

Pentru a înțelege cum funcționează SSR, să începem de la elementele de bază pentru a implementa o dovadă de concept.

Să nu ezitați să săriți peste acest paragraf dacă doriți doar să vă uitați în bibliotecile care oferă SSR și să nu vă deranjați cu munca de bază

Pentru a implementa SSR de bază vom folosi Express.

Dacă sunteți nou în Express, sau dacă aveți nevoie să vă puneți la punct, consultați manualul meu gratuit Express Handbook aici: https://flaviocopes.com/page/ebooks/.

Atenție: complexitatea SSR poate crește odată cu complexitatea aplicației dumneavoastră. Aceasta este configurația minimă pentru a reda o aplicație React de bază. Pentru nevoi mai complexe s-ar putea să trebuiască să lucrați un pic mai mult sau să verificați și bibliotecile SSR pentru React.

Presupun că ați început o aplicație React cu create-react-app. Dacă abia încercați, instalați una acum folosind npx create-react-app ssr.

Veți în folderul principal al aplicației cu ajutorul terminalului, apoi rulați:

npm install express

Aveți un set de foldere în directorul aplicației. Creați un nou dosar numit server, apoi intrați în el și creați un fișier numit server.js.

Să urmăriți convențiile create-react-app, aplicația locuiește în fișierul src/App.js. Vom încărca acea componentă și o vom reda într-un șir de caractere folosind ReactDOMServer.renderToString(), care este furnizat de react-dom.

Obțineți conținutul fișierului ./build/index.html și înlocuiți marcajul <div></div>, care este tag-ul în care aplicația se agață în mod implicit, cu `<div>${ReactDOMServer.renderToString(<App />)}</div>.

Toate conținuturile din interiorul folderului build vor fi servite ca atare, static de către Express.

import path from 'path'import fs from 'fs'import express from 'express'import React from 'react'import ReactDOMServer from 'react-dom/server'import App from '../src/App'const PORT = 8080const app = express()const router = express.Router()const serverRenderer = (req, res, next) => { fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => { if (err) { console.error(err) return res.status(500).send('An error occurred') } return res.send( data.replace( '<div></div>', `<div>${ReactDOMServer.renderToString(<App />)}</div>` ) ) })}router.use('^/$', serverRenderer)router.use( express.static(path.resolve(__dirname, '..', 'build'), { maxAge: '30d' }))// tell the app to use the above rulesapp.use(router)// app.use(express.static('./build'))app.listen(PORT, () => { console.log(`SSR running on port ${PORT}`)})

Acum, în aplicația client, în src/index.js dumneavoastră, în loc să apelați ReactDOM.render():

ReactDOM.render(<App />, document.getElementById('root'))

apelați ReactDOM.hydrate(), care este același lucru, dar are capacitatea suplimentară de a atașa ascultători de evenimente la marcajele existente odată ce React se încarcă:

ReactDOM.hydrate(<App />, document.getElementById('root'))

Toate elementele Node.js trebuie să fie transpilat de Babel, deoarece codul Node.js de pe partea serverului nu știe nimic despre JSX, nici despre modulele ES (pe care le folosim pentru declarațiile include).

Instalați aceste 4 pachete:

npm install @babel/register @babel/preset-env @babel/preset-react ignore-styles

ignore-styles este un utilitar Babel care îi va spune să ignore fișierele CSS importate folosind sintaxa import.

Să creăm un punct de intrare în server/index.js:

require('ignore-styles')require('@babel/register')({ ignore: , presets: })require('./server')

Constituiți aplicația React, astfel încât folderul build/ să fie populat:

npm run build

și să rulăm acest lucru:

node server/index.js

Am spus că aceasta este o abordare simplistă, și este:

• nu se ocupă de redarea corectă a imaginilor atunci când se utilizează importuri, care au nevoie de Webpack pentru a funcționa (și care complică foarte mult procesul)
• nu se ocupă de metadatele din antetul paginii, care sunt esențiale în scopuri SEO și de partajare socială (printre altele)

Așa că, deși acesta este un bun exemplu de utilizare a ReactDOMServer.renderToString() și ReactDOM.hydrate pentru a obține această redare de bază pe server, nu este suficient pentru utilizarea în lumea reală.

Server Side Rendering folosind biblioteci

SSR este greu de făcut corect, iar React nu are o modalitate de-facto de a o implementa.

Este încă foarte discutabil dacă merită deranjul, complicațiile și costurile suplimentare pentru a obține beneficiile, mai degrabă decât să folosești o tehnologie diferită pentru a servi acele pagini. Această discuție de pe Reddit are o mulțime de păreri în această privință.

Când Server Side Rendering este o chestiune importantă, sugestia mea este să vă bazați pe biblioteci și instrumente prefabricate care au avut în vedere acest obiectiv încă de la început.

În special, sugerez Next.js și Gatsby.

The 2021 JavaScript Full-Stack Bootcamp IS NOW OPEN FOR SIGNUPS UNUPS UNTIL NEXT MARȚI! Nu ratați această oportunitate, înscrieți-vă AZI!

Mai multe tutoriale React:

• Configurare VS Code pentru dezvoltarea React
• React Concept: Imutabilitatea
• Cum să returnezi mai multe elemente în JSX
• Portale React
• Cum să redai HTML în React
• Harta de parcurs pentru a învăța React
• Ar trebui să folosești jQuery sau React?
• Cum să folosești cârligul React useRef
• React Router, cum să obții date de pe o rută dinamică