Sådan cacheres alle sider i Next.js på serversiden

Next.js er en stor SSR-ramme til at oprette apps og websteder. SSR betyder, at du kan bruge React.js-kode på serveren, og klienten kan få adgang til en hvilken som helst url eller placering når som helst og vil blive gengivet HTML, ligesom den ville blive gengivet i browseren.

SSR + React = langsom SSR

Problemet er, at React er temmelig dyrt, når det handler om at gengive siden på serversiden. Det er OK for mennesker, hvis siden gengives i 0.1s - med et øjeblik. Men for serveren er tiden for stor og betyder lav gennemstrømning. Google PageSpeed ​​Insights beder dig om at reducere serverens responstid, og dit webstedsresultat er lavere, hvis sider gengivelse er længere end 0.2s-0.25s.

Løsningen er at cache sider. Du kan altid bruge nginx til at cache alt. Ngninx er god til at cache. Du lægger det lige mellem klienter og din app. Men reglerne for nginx-cache er muligvis ikke nok fleksible til dine brugssager.

Cache inde i din app giver dig meget mere kontrol. Der er en praktisk måde at gøre det i next.js-projekt ved hjælp af express.js brugerdefinerede server. I den brugerdefinerede server kan du lade din app beslutte, hvis den gengiver en side, returnerer cache-indhold eller endda hvilken nøjagtig version af den.

Next.js-repo på Github har en kildekode til app-eksemplet, hvor den cache SSR-sider i hukommelsen. Men det cacher kun et sted af mange og fungerer ikke, hvis du prøver at cache alle sider. Det sker, fordi en speciel placering / _næste / bruges til at tjene statisk indhold og kræver forskellig behandling. Ved hjælp af dette eksempel oprettede jeg en kode, der gør det muligt at cache alle sider og servere statisk indhold korrekt.

Én server.js for at cache dem alle

Hvad sker der nøjagtigt her?

Først og fremmest opretter jeg en ekspress instans, der håndterer anmodninger i stedet for næste.js.

Jeg har også brug for next.js-forekomst for at udføre alt arbejde undtagen cache. Det er tilgængeligt i appens konstante.

Derefter bruger jeg LRUcache-instansen til at gemme cachen. Du kan bruge enhver anden opbevaring, hvis du vil. Husk, at LRUCache-indstilling max har lav betydning alene og kræver, at længdefunktion defineres for at give dig bedre kontrol over cache-størrelse. Property maxAge giver dig mulighed for at definere det tidspunkt, hvor posten alligevel udløber.

Const-håndtaget er standard next.js-behandleren til anmodninger og bruges til at tjene statisk indhold.

Forespørgsler med URL'er, der starter med / _næste /, skal behandles med next.js selv. Jeg opretter rute / _næste / *, der overfører dem til standard næste.js-behandlingsfunktionshåndtering og nu behandles korrekt.

Alle de andre forespørgsler går til server.get ('*') og vil blive cache, efter at de er blevet gengivet. Du kan definere andre placeringer til at håndtere forskellige situationer eller endda bruge forskellige lagre. Jeg har ikke brug for det, så lad os dykke ned i renderAndCache-funktionsmekanikken.

Dens kode er næsten den samme som i eksemplet i next.js repo. Det har x-cache-header, men jeg er ikke sikker på, om det har nogen anden betydning, bortset fra bare for at give dig mulighed for at se i browseren eller anden klientsoftware blev url-adressen serveret fra cache eller gengivet.

Du behøver ikke at ændre koden for den funktion, fordi kontrollen af, hvad der skal serveres fra cache eller vil blive gengivet, skal udføres ved kun at ændre nøglen, der er genereret til den anmodning.

Opbevaring af nøgleværdier har en simpel idé - du lægger noget med et navn på lageret. Og når du har brug for det, beder du bare lageret om at give dig, hvad det nogensinde har med det navn. Hvis det giver dig noget - bruger du det. Hvis det ikke giver dig noget - skal du oprette det.

Jeg bruger req.path som en nøgle. Det genereres i funktionen getCacheKey (), der kun har en linje, der netop returnerer en variabel. Men hvorfor bruge en funktion til en så simpel opgave? Fordi denne funktion giver dig mulighed for at bruge al den information, der følger med anmodning, til at oprette en nøgle, der er bygget ud fra alle parametre, der påvirker gengivelsen.

Næste gang viser jeg dig, hvordan du laver enkle omdirigeringer med next.js.