Клиенттік жұмысты азайтып, пайдалы әрі краулер оқитын контентті сақтау үшін Server Components пен стриминг шекараларын қолдану.
Заманауи Next.js App Router — тек React қосымшаларын құрудың жаңа тәсілі ғана емес — бұл басқа өнімділік моделі. Server Components, стриминг және edge жұмыс ортасы контентті тезірек жеткізе отырып, браузерге әлдеқайда аз JavaScript жіберуге мүмкіндік береді. Дұрыс қолданылса, олар лезде сезілетін сайт пен айналып тұрған сайт арасындағы айырмашылық.
Server Components: азырақ JavaScript жеткізіңіз
Серверде рендерлене алатын әрбір компонент рендерленуі керек. Server Components компоненттің кодын, оның тәуелділіктерін және деректер алу логикасын клиентке жіберудің орнына дайын HTML жібереді. Нәтижесінде — кішірек бандль, жылдамырақ гидратация және клиенттік JavaScript-тің бір жолы да іске қосылмай тұрып көрінетін контент.
Стриминг және Suspense шекаралары
Стриминг серверге бетті бөлшектеп жіберуге мүмкіндік береді. Баяу немесе деректерге ауыр бөлімдерді Suspense ішіне орап қойыңыз, сонда жылдам бөліктер бірден көрінеді, ал қалғаны кейін толтырылады — енді пайдаланушы бірдеңе көру үшін ең баяу сұраудың аяқталуын күтпейді.
- Клиент компоненттерін шағын ұстап, оларды ағаштың жапырақтарына қарай ығыстырыңыз
- Экран астындағы және деректерге ауыр бөлімдерді Suspense артында стримдеңіз
- Жауаптар пайдаланушыға жақын басталуы үшін edge-те рендерлеңіз
- Ауыр интерактивті виджеттерді алғашқы көрсетуден кейін баяу жүктеңіз
Айла емес, үлгілер
Бұл мүмкіндіктердің ешқайсысы сиқырлы қосқыш емес. Сервер және клиент шекараларын, стриминг пен жұмыс ортасын әр маршрутқа сай жобалап, бандль көлемі мен жауап уақытын production build-та өлшеу керек.