Как да кеширате всички страници в Next.js от страна на сървъра

Next.js е чудесна SSR рамка за създаване на приложения и уебсайтове. SSR означава, че можете да използвате React.js код на сървъра и клиентът може да получи достъп до всеки URL адрес или местоположение по всяко време и ще получи визуализиран HTML така, както би бил рендиран в браузъра.

SSR + React = бавен SSR

Проблемът е, че React е доста скъп, когато става въпрос за визуализиране на страницата от страна на сървъра. За хората е добре, ако страницата е изобразена за 0,1 секунди - с миг на око. Но за сървъра това време е твърде голямо и означава ниска пропускателна способност. Google PageSpeed ​​Insights ви моли да намалите времето за отговор на сървъра и резултатът от уебсайта ви е по-нисък, ако визуализацията на страницата е по-дълга от 0,2s-0,25s.

Решението е да кеширате страници. Винаги можете да използвате nginx, за да кеширате всичко. Ngninx е добър в кеширането. Просто го поставяте между клиенти и приложението си. Но правилата за кеширане на nginx може да не са достатъчно гъвкави за вашите случаи на използване.

Кеширането в приложението ви дава много повече контрол. Има удобен начин да направите това в next.js проект, използвайки персонализиран сървър Express.js. В този персонализиран сървър можете да оставите приложението ви да реши, ако визуализира страница, връща кеширано съдържание или дори коя точно версия на него.

Next.js repo в Github има изходен код на примерното приложение, където кешира SSR страниците в паметта. Но кешира само едно място от много и не работи, ако опитате да кешира всички страници. Това се случва, защото за обслужване на статично съдържание се използва специално местоположение / _next / и изисква различна обработка. Използвайки този пример, създадох код, който позволява да кешира всички страници и да обслужва правилно статично съдържание.

Един server.js да ги кешира всички

Какво точно се случва тук?

На първо място създавам експресен екземпляр, който ще обработва заявки вместо next.js.

Също така ми трябва next.js инстанция, за да свърша цялата работа, освен кеширането. Предлага се в константата на приложението.

Тогава използвам екземпляр LRUcache, за да съхраня кеша. Можете да използвате всяко друго хранилище, ако искате. Не забравяйте, че настройката на LRUCache max има само по себе си ниско значение и изисква да бъде определена дължина, за да ви осигури по-добър контрол върху размера на кеша. Свойството maxAge ви позволява да определите времето, когато записът изтича така или иначе.

Const дръжката е по подразбиране обработващ next.js за заявки и ще се използва за обслужване на статично съдържание.

Заявките с URL адреси, започващи с / _next /, трябва да бъдат обработени със самия next.js. Създавам route / _next / *, който ги прехвърля към defaulthajs обработващия по подразбиране функцияhandle и сега ще бъде обработен правилно.

Всички останали заявки ще отидат до server.get ('*') и ще бъдат кеширани, след като са направени. Можете да определите други местоположения за справяне с различни ситуации или дори да използвате различни съхранения. Не ми трябва, затова нека се потопим в механиката на функцията renderAndCache.

Кодът му е почти същият като примера в next.js repo. Той има х-кеш заглавие, но не съм сигурен дали има някакво друго значение, освен само за да ви позволи да видите в браузъра или друг клиентски софтуер е бил URL адресът, подаден от кеш или предоставен.

Не е необходимо да променяте кода на тази функция, защото контролът върху това, което ще бъде сървър от кеша или ще бъде предоставено, трябва да се извърши само чрез промяна на ключа, генериран за тази заявка.

Съхранението на ключ-стойност има проста идея - вие поставяте нещо с име в съхранението. И когато имате нужда от него, просто помолете съхранението да ви даде всичко, което някога има с това име. Ако ти даде нещо - използваш го. Ако не ви дава нищо - трябва да го създадете.

Използвам req.path като ключ. Генерира се във функцията getCacheKey (), която има само един ред, който само връща една променлива. Но защо да използвате функция за толкова проста задача? Тъй като тази функция ви позволява да използвате цялата информация, предоставена със заявка, за да създадете ключ, който е изграден от всички параметри, които влияят на изобразяването.

Следващия път ще ви покажа как да правите прости пренасочвания с next.js.