Розумэнне складовых кэша і частковага прадзягання дадзеных у Next.js 16.3
Пасвячаецца таму, як функцыя Instant Navigations у Next.js 16.3 выкарыстоўвае спяльныя шэлі маршрутаў і чыстае прыняцця рашэнняў па стрімаванні, каб аплікацыі, якія вырабляюцца на сервере, давалі вражанне мгновеннага перайшоў.
App Router з давен мае незначную недзею паўстаноўна пры порэванні з чыстым SPA, які рендаруецца на кліянцы.
Калі ўсё працуе ў браузеры, перайшча між маршрутамі — гэта проста апдэйт стану, таму ён выконваецца мгновена па сваймым вакладзенню. Рендараванне спачатку на серверы пасвячае гэта мгновеннае відчуття зарады значна меншага пачатковага пакету дадзеных.
Але за гэты компроміс трэба платіць пазней: кожна навігацыя пасля першай значыць неабходнае зноў вярненне да сервера.
Next.js 16.3 прымечна борацца з гэтым самым проблемам.
Гэтае фіча называецца Instant Navigations і базуецца на двух асновных механізмах: Кэшаванне компонентаў і частковая прадзейстовая загрузка.
Кожная фіча навігацыі, якая калі-небудзь была дадана гэтым фреймворкам, выглядала чудова на MacBook.
То што ж ёна на самай працы робіць?
Гэта ідея практычна безпосередньа вытэкла з дизайна аплікацый на адной сторонцы. У протывес прабавам падготавляць полную копію сторонкі-пункта прыязыку для кожнага лінка, як гэта было у пакульных версіях,
Next.js тепер падготавляе шэл, які дзеліцься между роутамі і зберагае яго ў кэшы на кліянцы. Калі вы нажмете на лінк, гэты шэл адразу ж відрасце, тады як сервер передае залишны контэнт.
Гэты шэл спецыяльна робіцца простым. Цэўкае лейаут, навігацыйныя елементы, заголовкі і канстрактная структура — па суты, все тое, што выглядае аднакова незалежна ад таго, на якую конкрэтную сторонку таго роуту вы прайдзеце. Паколькі ён ніколі не змінюецца, можна безбедна зберагаць яго ў кэшы раз і вжываць знову для дзесяткаў лінкаў, якія ўсе вядуць на той самы роут.
Яго можна актывацыяў за дапамогою двух флагаў налаштавання:
const nextConfig: NextConfig = {
cacheComponents: true,
partialPrefetching: true,
};
Апэксцяны гэтыя павінны стаць стандартамі ў якой-небудзь будучай значный версіі. Якшы вы ўвяжаеце іх яшчэ сёньдзе, вы будзеце адстаць ад гэтых змян, а не застрягнуце ў якомсь эксперыментальным тупіку.
Чаму гэта больш, чым проста „праця ў прамаху, але шырэй“
Насамперад, справжня змяна тут не стосуецца чыстаў швальнасці. Хоць це і стосуецца яе, галоўная мета — змусіць зробіць чыстае рашэння па кожнаму маршруту.
Next.js 16.3 адкрывае новы інструмент для разработкі пад назвай Instant Insights, який аўтаматычна пазначае, прымусова, у вашай средзе разработкі, кожную навігацыю, якая не патрабуе мглевай рэакцыі. Чым адмахнуцца гэтай пазначкі, кожны маршрут тепер должен чыста адзначыць, што трэба рабіць, калі данні яшчэ не гатовы. Існуе роўна тры правільныя адпаведзі:
Трансляюць іх па стрыме. Абгорніце повольную частку ў <Suspense>, каб падчас, калі сервер завершае свою роботу, апылялася панель з меткай „загрузка“.
Зберагаеце ў кэшы. Атрымакі з такім пазначэнням 'use cache' дазволяюць выдаваць ранейшую версію заместо чакання.
Навмесна блакуйце ўвесь процэс. Ўтрымайце export const instant = false для маршрутаў, дзе чаканне ёсць правільным падходам, напрыклад для палявання падтверджэння аплыцення, калі показ часовых дадзэнняў будзе горшы, чым проста заставіць корыстніка чакаць калеку секунд.
Трэці варыянт заслуговае на увагу. Ён ператварае фразу "гэты маршрут медленны" з незазначанага адбыўкі на свядома, задокументаванае рашэнне. Фреймворк не выказвае трэбавання, каб кожны маршрут працаваў мгновенна. Ён проста кажа, што з цяперашняй хвілі медленнае працаванне павінна быць намеральным, а не стандартным.
Дзе гэта даслівна даўа рынкі
Самым яскравым прыкладам ёсць тыя элементы, у якіх є дужа довгій список спяваў, напрыклад, падпіска для падтрымкі, дзе паказана чатырнаццаць рядоў з запитамі. Кожная адна сторонка з запитам выканае, верагодна, наявнае тое ж самае рэбрыцо інструментаў, сетку метаданых і структуру дыялогу. Якщо запрашаць цэлую адную сторонку для кожнага спява, то будзе запрашана гэтая ідэнтычная спольнае структура чатырнаццаць разоў. У працэзе частковага запрашання спольная структура запрашваецца толькі раз, і яна викорыстоўваецца для кожнага спява, які вядуць да той маршруту, а ўсё тое, што ёсць унікальным — адносна контэнт конкретнага запиту, — прыносіцца пасля.
Это конкрэтны і значыцый праграс, і ён добра адпавядае таму, як на самай працэ прайшоў стварэння багатых панелей керування типу SaaS.
Тое, чаго большасць аналізаў не выявляе
Адзін разработчык пераканала свой асобны блог на версію 16.3 preview на адзінам бранчы, штоўна застосаваў компаненты кэшу і частачнае прадзейсвоўванне, а таксама выкорыстаў набор з 19 тэстаў Playwright, які спецыяльна пераканваліся, што навігацыя вядзецца момантальна. Усі тэсты праўіліся.
Пасля таго, як яны працавалі з обомя версіямі ўпроцэсе аднаго тыдня, яны не змоглі выявіць жадных рэальных разніцаў.
Паспяшна выявілася, што адказ на гэта працоўна просты.
Сайт вялікай часткай быў ўжо цэлыста статычны: кожная стороніца была прадзейсвоўвана ўчасе стварэння і выдаўалася безпосередна з CDN. Не заставало нічога, што можна было б усунуць, таму функцыя Instant Navigations не мела нічога, што можна было б устраніць.
Тое, што насправдзе зробіла сайт быстрэйшым, было чымс абоўсумна іншым: скасыць 341 KB архіваванага JavaScript-кода.
Это тыя абавансы, якія трэба прымець на увазе перш чым адпраўляцца да выкарыстоўвання гэтай функцыі. Instant Navigations скасоўвае затрымку между нажатыем на лінк і адразуванням кантэнту, што ўзначальна для дынамічных маршрутаў, якія залежаць ад сервера.
Якщо ваша прыкладна програма вялікай часткай ўжо статычная, або вже працюе быстра з іншых прычын, вы будете адпраўляцца да выкарыстоўвання функцыі, каб рашыць проблему, якой у вашым случае няма.
Спачатку спробавайце яе на тых маршрутах, дзе рэальна відчуваецца спад, а не распространяйце яе на весь сайт, і пераканайцеся ў рэзультаатах на мерыджанай з’ѐеднанні Android, а не на ноутбуку па швайцарскай сеті офіса. Коментар пра MacBook на пачатку вартуе запам’ятавання: практычна кожная функцыя навігацыі, якую калі-небудзь запрацоўваў гэты фреймворк, выглядала вражаюча на MacBook.
Эта праметра не выклеквае, каб кожны маршрут працаваў мгновенна. Яна проста кажа, што з гэтага моменту сповольнае працаванне павінна быць намеральным, а не стандартным.
Што насправды трэба зрабіць
Якщо вы вже выкарыстоўваеце Next.js 16.x і навігацыя здаецца сповольнай, пачніце з малага. Увялічыце функцыю частковага прадзействавання толькі для двух-трох найболей актыўных маршрутаў, перш чым застосаваць яе ў іншых месцах. Большая частьы корысті даецца самэй падготовчай роботе, а теставанне у вузкім дыяпазоне таксама пакажа, чы рэштры былі належна адсакраненыя ад процэса запрашання дадзеных, што для багато рэальных кодавых баз выявляецца як болей корыстны факт.
Якщо вы ўсё яшчэ на Pages Router і разважаеце, чы гэта трэба мігруаваць, гэтыя функцыі не павинны стаць для вас важлівым фактам для прыняцтва рашэння. Тое, што Turbopack стае стандартам для разработкі, а таксама болейшая стабілізацыя App Router, — гэта справжнія прычыны для пераходу. Instant Navigations — это бонус, які вы отрымаеце пасля таго, а не прычына для пачатку міграцыі з самага початку.
А якщо ваша аплікацыя вже цалкам статычная, проста прыхіліцеся да міграцыі.
Лепш знайдзіце сабе свае 341KB.
Спадні матэрыялы
- 20 прыглушэнных патэранаў Next.js для аплікацый App Router высокага стандарту — Дзеяўце аб двадзесяці патэранах высокага рангу Next.js, якія включаюць дизайн на аснове сервера, стрімінг, кэшаванне, маршрутызацыю і практыкі для падтрымкі высокай працэздатнасі, каб ствараць быстрейшыя та масштабаваныя аплікацыі.