Server Side Rendering med React

Den 2021 JavaScript Full-Stack Bootcamp er NU ÅBEN FOR TILMELDINGER!

Server Side Rendering, også kaldet SSR, er muligheden for at rendere en JavaScript-applikation på serveren i stedet for i browseren.

Hvorfor skulle vi nogensinde ønske at gøre det?

• Det giver dit websted en hurtigere indlæsningstid på den første side, hvilket er nøglen til en god brugeroplevelse
• Det er vigtigt for SEO: Søgemaskinerne kan (endnu?) ikke indeksere programmer, der udelukkende renderes på klientsiden, effektivt og korrekt. På trods af de seneste forbedringer af indekseringen i Google, er der også andre søgemaskiner, og Google er under alle omstændigheder ikke perfekt til det. Desuden favoriserer Google websteder med hurtige indlæsningstider, og det er ikke godt for hastigheden at skulle indlæse client-side
• Det er fantastisk, når folk deler en side på dit websted på sociale medier, da de nemt kan samle de metadata, der er nødvendige for at dele linket pænt (billeder, titel, beskrivelse…)

Og uden Server Side Rendering er alt, hvad din server sender, en HTML-side uden krop, blot nogle script-tags, som derefter bruges af browseren til at gengive applikationen.

Klient-renderede apps er fantastiske ved enhver efterfølgende brugerinteraktion efter den første sideindlæsning. Server Side Rendering giver os mulighed for at få det søde punkt midt imellem klient-renderede apps og backend-renderede apps: siden genereres server-side, men alle interaktioner med siden, når den først er blevet indlæst, håndteres klient-side.

Server Side Rendering har dog også sin ulempe:

• Det er rimeligt at sige, at et simpelt SSR-konceptbevis er simpelt, men kompleksiteten af SSR kan vokse med kompleksiteten af din applikation
• Rendering af en stor applikation server-side kan være ret ressourcekrævende, og under stor belastning kan det endda give en langsommere oplevelse end rendering på klientsiden, da du har en enkelt flaskehals

Et meget forenklet eksempel på, hvad det kræver at server-side rendere en React-app

SSR-opsætninger kan vokse sig meget, meget komplekse, og de fleste tutorials vil bage Redux, React Router og mange andre koncepter ind fra starten.

For at forstå, hvordan SSR fungerer, skal vi starte fra det grundlæggende for at implementere et proof of concept.

Føl dig fri til at springe dette afsnit over, hvis du bare vil kigge på de biblioteker, der leverer SSR, og ikke gider at beskæftige dig med det grundlæggende arbejde

For at implementere grundlæggende SSR skal vi bruge Express.

Hvis du er ny i Express, eller hvis du har brug for lidt indhentning, kan du tjekke min gratis Express-håndbog her: https://flaviocopes.com/page/ebooks/.

Varsling: Kompleksiteten af SSR kan vokse med kompleksiteten af din applikation. Dette er den absolutte minimumsopsætning til at rendere en grundlæggende React-app. For mere komplekse behov skal du måske gøre lidt mere arbejde eller også tjekke SSR-biblioteker til React.

Jeg antager, at du har startet en React-app med create-react-app. Hvis du bare prøver, kan du installere en nu med npx create-react-app ssr.

Gå til hovedapp-mappen med terminalen, og kør derefter:

npm install express

Du har et sæt mapper i din app-mappe. Opret en ny mappe med navnet server, gå derefter ind i den og opret en fil med navnet server.js.

I overensstemmelse med create-react-app-konventionerne bor appen i src/App.js-filen. Vi indlæser denne komponent og renderer den til en streng ved hjælp af ReactDOMServer.renderToString(), som leveres af react-dom.

Du henter indholdet af ./build/index.html-filen og erstatter <div></div>-placeholder, som er det tag, hvor applikationen som standard hookes, med `<div>${ReactDOMServer.renderToString(<App />)}</div>.

Alt indhold i build-mappen vil blive serveret som det er, statisk af 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}`)})

Nu, i klientprogrammet, i din src/index.js, i stedet for at kalde ReactDOM.render():

kald ReactDOM.hydrate(), som er det samme, men som har den ekstra mulighed for at knytte event listeners til eksisterende markup, når React indlæses:

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

Alle Node.js-kode skal transpileres af Babel, da Node.js-kode på serversiden ikke kender noget til JSX eller ES Modules (som vi bruger til include-angivelserne).

Installer disse 4 pakker:

ignore-styles er et Babel-værktøj, der fortæller den, at den skal ignorere CSS-filer, der er importeret ved hjælp af import-syntaksen.

Lad os oprette et indgangspunkt i server/index.js:

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

Byg React-applikationen op, så mappen build/ er udfyldt:

npm run build

og lad os køre dette:

node server/index.js

Jeg sagde, at dette er en forenklet tilgang, og det er det også:

• Det håndterer ikke rendering af billeder korrekt ved brug af import, som kræver Webpack for at fungere (og som komplicerer processen meget)
• Det håndterer ikke sidehovedmetadata, som er afgørende for SEO og social deling (blandt andet)

Så selvom dette er et godt eksempel på at bruge ReactDOMServer.renderToString() og ReactDOM.hydrate til at få denne grundlæggende server-side rendering, er det ikke nok til brug i den virkelige verden.

Server Side Rendering ved hjælp af biblioteker

SSR er svært at gøre rigtigt, og React har ingen de-facto måde at implementere det på.

Det er stadig meget diskutabelt, om det er besværet, komplikationen og overheadet værd at få fordelene, frem for at bruge en anden teknologi til at servere disse sider. Denne diskussion på Reddit har masser af meninger i den henseende.

Når Server Side Rendering er en vigtig sag, er mit forslag at stole på færdiglavede biblioteker og værktøjer, der har haft dette mål for øje siden begyndelsen.

I særdeleshed foreslår jeg Next.js og Gatsby.

The 2021 JavaScript Full-Stack Bootcamp IS NOW OPEN FOR SIGNUPS UNTIL NEXT TUESDAY! Gå ikke glip af denne mulighed, tilmeld dig i dag!

Mere react tutorials: