Jak ukládat do mezipaměti všechny stránky v Next.js na straně serveru

Next.js je skvělý rámec SSR pro vytváření aplikací a webů. SSR znamená, že na serveru můžete použít kód React.js a klient může kdykoli přistupovat k jakékoli adrese URL nebo umístění a vykreslený HTML bude vykreslen stejně, jako by byl vykreslen v prohlížeči.

SSR + React = pomalý SSR

Problém je v tom, že React je docela nákladný, pokud jde o vykreslování stránky na straně serveru. Je to v pořádku pro lidi, pokud je stránka vykreslena za 0,1 s - mrknutím oka. Ale pro server je tento čas příliš velký a znamená nízkou propustnost. Statistiky Google PageSpeed ​​vás požádají o zkrácení doby odezvy serveru a skóre vašeho webu je nižší, pokud je vykreslení stránky delší než 0,2s-0,25s.

Řešením je ukládání stránek do mezipaměti. Vždy můžete použít nginx k uložení do mezipaměti vše. Ngninx má dobré mezipaměti. Prostě to vložíte mezi klienty a vaši aplikaci. Pravidla ukládání do mezipaměti nginx však pro vaše případy použití nemusí být dostatečně flexibilní.

Ukládání do mezipaměti uvnitř aplikace vám poskytuje mnohem větší kontrolu. Existuje pohodlný způsob, jak toho dosáhnout v projektu next.js pomocí vlastního expresního serveru express.js. Na tomto vlastním serveru můžete nechat aplikaci rozhodnout, zda vykreslí stránku, vrátí obsah v mezipaměti nebo dokonce její přesnou verzi.

Reproces Next.js v Githubu obsahuje zdrojový kód vzorové aplikace, kde ukládá do paměti cache SSR stránky. Ukládá se však do mezipaměti pouze jednoho místa a nefunguje, pokud zkusíte mezipaměť všech stránek. K tomu dochází, protože k umístění statického obsahu se používá speciální umístění / _next / a vyžaduje odlišné zpracování. Pomocí tohoto příkladu jsem vytvořil kód, který umožňuje ukládat do mezipaměti všechny stránky a správně zobrazovat statický obsah.

Jeden server.js je všechny uloží do mezipaměti

Co se tady přesně děje?

Nejprve vytvořím expresní instanci, která bude zpracovávat požadavky místo next.js.

Také potřebuji instanci next.js, abych mohl dělat všechny práce kromě ukládání do mezipaměti. Je k dispozici v konstantě aplikace.

Pak použiju instanci LRUcache k uložení mezipaměti. Pokud chcete, můžete použít jakékoli jiné úložiště. Nezapomeňte, že nastavení LRUCache max má samo o sobě malý význam a je třeba definovat funkci délky, která vám poskytne lepší kontrolu nad velikostí mezipaměti. Vlastnost maxAge vám umožňuje definovat čas, kdy položka stejně vyprší.

Popisovač const je výchozí obslužný program next.js pro žádosti a bude použit k poskytování statického obsahu.

Žádosti s adresami URL začínajícími na / _next / musí být zpracovány samotným next.js. Vytvářím trasu / _next / *, která je převede na výchozí funkční popisovač obsluhy next.js a nyní bude zpracována správně.

Všechny ostatní požadavky přejdou na server.get ('*') a po vyrenderování budou uloženy do mezipaměti. Můžete definovat jiná místa pro řešení různých situací nebo dokonce použít různá úložiště. Nepotřebuji to, tak se necháme ponořit do mechaniky funkce renderAndCache.

Jeho kód je téměř stejný jako v příkladu v repozitáři next.js. Má záhlaví x-cache, ale nejsem si jistý, zda má nějaký jiný význam kromě toho, že vám v prohlížeči nebo jiném klientském softwaru umožní vidět adresu URL zobrazenou v mezipaměti nebo vykreslení.

Není nutné měnit kód této funkce, protože ovládání toho, co bude serverem z mezipaměti nebo bude vykresleno, musí být provedeno pouze změnou klíče vygenerovaného pro tento požadavek.

Úložiště klíč-hodnota má jednoduchý nápad - do úložiště vložíte něco s názvem. A když to potřebujete, stačí požádat úložiště, aby vám dalo, co kdy má s tímto jménem. Pokud vám něco dá - použijete to. Pokud vám nic nedává - musíte ji vytvořit.

Jako klíč používám req.path. Generuje se ve funkci getCacheKey (), která má pouze jeden řádek, který právě vrací jednu proměnnou. Ale proč použít funkci pro takový jednoduchý úkol? Protože tato funkce umožňuje použít všechny informace poskytnuté s požadavkem k vytvoření klíče sestaveného ze všech parametrů, které ovlivňují vykreslování.

Až vám příště ukážu, jak provést jednoduchá přesměrování pomocí souboru next.js.