Server Side Rendering s Reactem

Kemp 2021 JavaScript Full-Stack Bootcamp je nyní otevřen pro přihlášení!

Server Side Rendering, také nazývaný SSR, je schopnost aplikace JavaScript vykreslovat na serveru, nikoli v prohlížeči.

Proč bychom to vůbec chtěli?

• umožňuje rychlejší načtení první stránky, což je klíčem k dobrému uživatelskému zážitku
• je to nezbytné pro SEO: vyhledávače nemohou (zatím?) efektivně a správně indexovat aplikace, které se vykreslují výhradně na straně klienta. Navzdory posledním vylepšením indexování v Googlu existují i jiné vyhledávače a Google v tom v žádném případě není dokonalý. Google také upřednostňuje weby s rychlým načítáním a nutnost načítání na straně klienta rychlosti neprospívá
• je skvělé, když lidé sdílejí stránku vašeho webu na sociálních sítích, protože mohou snadno shromáždit metadata potřebná k pěknému sdílení odkazu (obrázky, nadpis, popis,.)

Bez vykreslování na straně serveru je jediné, co vám server dodá, stránka HTML bez těla, jen několik značek skriptů, které pak prohlížeč použije k vykreslení aplikace.

Klientsky vykreslené aplikace jsou skvělé při jakékoli následné interakci uživatele po prvním načtení stránky. Server Side Rendering nám umožňuje získat sladké místo uprostřed mezi klientsky vykreslenými aplikacemi a backendově vykreslenými aplikacemi: stránka je generována na straně serveru, ale všechny interakce se stránkou po jejím načtení jsou zpracovávány na straně klienta.

Renderování na straně serveru má však i své nevýhody:

• dá se říci, že jednoduchý důkaz konceptu SSR je jednoduchý, ale složitost SSR může růst se složitostí vaší aplikace
• vykreslování velké aplikace na straně serveru může být poměrně náročné na zdroje a při velkém zatížení může dokonce poskytovat pomalejší vykreslování než vykreslování na straně klienta, protože máte jediné úzké hrdlo

Velmi zjednodušený příklad toho, co je potřeba k vykreslování aplikace React na straně serveru

Nastavení SSR může být velmi, velmi složité a většina výukových programů do něj od začátku zapracovává Redux, React Router a mnoho dalších konceptů.

Abychom pochopili, jak SSR funguje, začneme od základů a implementujeme důkaz konceptu.

Pokud se chcete jen podívat do knihoven, které SSR poskytují, a nezatěžovat se základní prací, klidně tento odstavec přeskočte

Pro implementaci základního SSR budeme používat Express.

Pokud s Expressem začínáte nebo potřebujete něco dohnat, podívejte se na mou bezplatnou příručku Express zde: https://flaviocopes.com/page/ebooks/.

Upozornění: Složitost SSR může růst se složitostí vaší aplikace. Toto je minimální nastavení pro vykreslení základní aplikace React. Pro složitější potřeby možná budete muset udělat trochu více práce nebo se také podívat na knihovny SSR pro React.

Předpokládám, že jste aplikaci React spustili pomocí create-react-app. Pokud to teprve zkoušíte, nainstalujte ji nyní pomocí npx create-react-app ssr.

Přejděte pomocí terminálu do hlavní složky aplikace a spusťte:

npm install express

V adresáři aplikace máte sadu složek. Vytvořte novou složku s názvem server, pak do ní přejděte a vytvořte soubor s názvem server.js.

Podle konvencí create-react-app se aplikace nachází v souboru src/App.js. Načteme tuto komponentu a vykreslíme ji do řetězce pomocí funkce ReactDOMServer.renderToString(), kterou poskytuje react-dom.

Získáte obsah souboru ./build/index.html a nahradíte zástupný symbol <div></div>, což je značka, do které se aplikace ve výchozím nastavení zahákne, značkou `<div>${ReactDOMServer.renderToString(<App />)}</div>.

Veškerý obsah uvnitř složky build bude obsluhován tak, jak je, staticky pomocí 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}`)})

Nyní v klientské aplikaci, ve vašem src/index.js, místo volání ReactDOM.render():

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

volejte ReactDOM.hydrate(), který je stejný, ale má navíc možnost připojit posluchače událostí k existujícím značkám, jakmile se React načte:

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

Všechny Node.js je třeba transpilovat pomocí Babelu, protože kód Node.js na straně serveru neví nic o JSX ani o modulech ES (které používáme pro příkazy include).

Instalace těchto 4 balíčků:

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

ignore-styles je nástroj Babelu, který mu řekne, aby ignoroval soubory CSS importované pomocí syntaxe import.

Vytvořme vstupní bod v server/index.js:

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

Sestavte aplikaci React tak, aby byla naplněna složka build/:

npm run build

a spustíme toto:

node server/index.js

Řekl jsem, že je to zjednodušený přístup, a je to tak:

• nezpracovává správně vykreslování obrázků při použití importů, které ke svému fungování potřebují Webpack (a které proces značně komplikují)
• nezpracovává metadata hlavičky stránky, která jsou nezbytná pro účely SEO a sdílení na sociálních sítích (mimo jiné)

Takže i když je to dobrý příklad použití ReactDOMServer.renderToString() a ReactDOM.hydrate pro získání tohoto základního vykreslování na straně serveru, pro reálné použití to nestačí.

Renderování na straně serveru pomocí knihoven

SSR je těžké udělat správně a React nemá de facto žádný způsob, jak ho implementovat.

Je stále velmi diskutabilní, zda to stojí za tu námahu, komplikace a režii, abychom získali výhody, než abychom k obsluze těchto stránek použili jinou technologii. V této diskusi na Redditu je v tomto ohledu spousta názorů.

Pokud je vykreslování na straně serveru důležitou záležitostí, navrhuji spoléhat se na předpřipravené knihovny a nástroje, které mají tento cíl od počátku na paměti.

Zejména doporučuji Next.js a Gatsby.

Tábor 2021 JavaScript Full-Stack Bootcamp JE NYNÍ OTEVŘEN PRO PŘIHLÁŠKY DO PŘÍŠTÍHO ÚTERÝ! Nepropásněte tuto příležitost a přihlaste se ještě DNES!

Další tutoriály o Reactu:

• Nastavení kódu VS pro vývoj Reactu
• Koncept Reactu: Jak vrátit více prvků v JSX
• Portály Reactu
• Jak vykreslovat HTML v Reactu
• Rozcestník, jak se naučit React
• Máte používat jQuery nebo React?
• Jak používat háček useRef React
• React Router, jak získat data z dynamické trasy

.