Server Side Rendering with React

Vuoden 2021 JavaScript Full-Stack Bootcamp on NYT AVOIMENA ILMOITTAUTUMISILLE!

Server Side Rendering, jota kutsutaan myös SSR:ksi, on JavaScript-sovelluksen kyky renderöidä palvelimella eikä selaimessa.

Miksi haluaisimme tehdä niin?

• Se mahdollistaa sivustosi nopeamman ensimmäisen sivun latautumisajan, mikä on avain hyvään käyttökokemukseen
• Se on olennainen SEO:n kannalta: hakukoneet eivät voi (vielä?) indeksoida tehokkaasti ja oikein sovelluksia, jotka renderöivät yksinomaan asiakaspuolella. Huolimatta Googlen viimeisimmistä parannuksista indeksoinnissa, on muitakin hakukoneita, eikä Google missään tapauksessa ole täydellinen siinä. Lisäksi Google suosii sivustoja, joilla on nopeat latausajat, ja asiakaspuolen lataaminen ei ole hyväksi nopeudelle
• On hienoa, kun ihmiset jakavat sivustosi sivua sosiaalisessa mediassa, koska he voivat helposti kerätä metatiedot, joita tarvitaan linkin nättiin jakamiseen (kuvat, otsikko, kuvaus…)

Ilman palvelinpuolen renderöintiä palvelimesi lähettää vain HTML-sivun, jossa ei ole runkoa, vain joitakin skriptitageja, joita selain käyttää sovelluksen renderöintiin.

Client-renderöidyt sovellukset ovat loistavia kaikessa myöhemmässä käyttäjävuorovaikutuksessa ensimmäisen sivulatauksen jälkeen. Palvelinpuolen renderöinnin avulla päästään asiakasrenderöityjen sovellusten ja taustarenderöityjen sovellusten välimaastoon: sivu luodaan palvelinpuolella, mutta kaikki vuorovaikutus sivun kanssa sen jälkeen, kun se on ladattu, hoidetaan asiakaspuolella.

Palvelinpuolen renderöinnillä on kuitenkin myös haittapuolensa:

• voi sanoa, että yksinkertainen SSR:n konseptitodistus on yksinkertainen, mutta SSR:n monimutkaisuus voi kasvaa sovelluksen monimutkaisuuden myötä
• Suuren sovelluksen renderöinti palvelinpuolella voi olla melko resurssi-intensiivistä, ja kovassa kuormituksessa se voi tarjota jopa hitaamman kokemuksen kuin asiakaspuolen renderöinti, koska sinulla on yksi pullonkaula

Hyvin yksinkertaistettu esimerkki siitä, mitä React-sovelluksen palvelinpuoleinen renderöinti vaatii

SSR-asetelmat voivat kasvaa hyvin, hyvin monimutkaisiksi ja useimmat opetusohjelmat leipovat Reduxin, React Routerin ja monia muita käsitteitä alusta alkaen.

Ymmärtääksemme, miten SSR toimii, aloitetaan perusasioista toteuttaaksemme proof of conceptin.

Voi vapaasti ohittaa tämän kappaleen, jos haluat vain tutustua kirjastoihin, jotka tarjoavat SSR:n, etkä vaivaudu pohjatyön kanssa

Toteuttaaksemme SSR:n perustoiminnot aiomme käyttää Expressiä.

Jos olet uusi Expressissä tai tarvitset hieman lisätietoa, tutustu ilmaiseen Express-käsikirjaani täällä: https://flaviocopes.com/page/ebooks/.

Varoitus: SSR:n monimutkaisuus voi kasvaa sovelluksesi monimutkaisuuden myötä. Tämä on pelkkä minimiasetus perus React-sovelluksen renderöintiin. Monimutkaisempia tarpeita varten sinun täytyy ehkä tehdä hieman enemmän työtä tai tutustua myös SSR-kirjastoihin Reactille.

Oletan, että aloitit React-sovelluksen create-react-app. Jos vasta kokeilet, asenna sellainen nyt npx create-react-app ssr:lla.

Mene sovelluksen pääkansioon terminaalilla ja suorita:

npm install express

Sinulla on joukko kansioita sovellushakemistossasi. Luo uusi kansio nimeltä server, mene siihen ja luo tiedosto nimeltä server.js.

Seuraamalla create-react-app-konventioita sovellus asuu src/App.js-tiedostossa. Aiomme ladata tuon komponentin ja renderöidä sen merkkijonoksi käyttäen ReactDOMServer.renderToString(), jonka tarjoaa react-dom.

Hankitaan ./build/index.html-tiedoston sisältö ja korvataan <div></div>-paikanhaltija, joka on tagi, johon sovellus oletusarvoisesti koukistuu, `<div>${ReactDOMServer.renderToString(<App />)}</div>.

Kaikki build-kansion sisällä oleva sisältö tarjoillaan sellaisenaan, staattisesti Expressin avulla.

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}`)})

Nyt asiakassovelluksessa, src/index.js:ssä, sen sijaan että kutsuisit ReactDOM.render():

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

kutsu ReactDOM.hydrate(), joka on sama, mutta siinä on lisäksi mahdollisuus liittää tapahtumakuuntelijoita olemassa olevaan markupiin, kun React latautuu:

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

Kaikki Node.js-koodi on käännettävä Babelilla, koska palvelinpuolen Node.js-koodi ei tiedä mitään JSX:stä eikä ES Modulesista (joita käytämme include-lausekkeissa).

Asenna nämä neljä pakettia:

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

ignore-styles on Babelin apuohjelma, joka käskee sitä jättämään huomiotta CSS-tiedostot, jotka on tuotu import-syntaksilla.

Luotaan sisääntulopiste server/index.js:

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

Rakennetaan React-sovellus niin, että build/-kansio on täytetty:

npm run build

ja ajetaan tämä:

node server/index.js