Skip to main content

Як layout впливає на продуктивність?

Next.jsMiddle~2 хв читання
Запропонувати правку

Layout напряму впливає на продуктивність у Next.js, тому що він бере участь у тому, що перемальовується при навігації, де виконується код і як завантажуються дані. Якщо казати просто - layout допомагає оновлювати тільки те, що дійсно потрібно.

Розберемо основні моменти.

1. Layout не перемальовується при переходах між сторінками

Коли користувач переходить між сторінками всередині одного layout:

  • layout не розмонтовується
  • його React-дерево залишається в пам'яті
  • змінюється тільки page

Це означає:

  • менше рендерів
  • менше роботи для React
  • швидша навігація

Особливо помітно на сторінках з важким UI (меню, сайдбари, графіки).

2. Збереження стану без зайвої логіки

Оскільки layout зберігається:

  • стан меню не скидається
  • не потрібно зберігати UI-стан в URL чи глобальному сторі
  • менше коду → менше обчислень

Менше «костилів» - менше зайвих перерахунків і ефектів.

3. Часткове оновлення інтерфейсу

Next.js оновлює тільки ту частину дерева, де змінився маршрут.

Якщо структура така:

RootLayout └─ DashboardLayout └─ Page

При переході між сторінками /dashboard/*:

  • RootLayout та DashboardLayout залишаються
  • перемальовується тільки Page

Це робить навігацію схожою на SPA, але без повної клієнтської перемальовки.

4. Серверний рендер і стримінг

Layout - Server Component типово, а отже:

  • рендериться на сервері
  • може брати участь у стримінгу HTML
  • надсилається користувачу частинами

Браузер починає відображати інтерфейс раніше, навіть якщо дані для сторінки ще завантажуються.

5. Менше JavaScript на клієнті

Код layout'а:

  • не потрапляє в JS-бандл, якщо він серверний
  • не гідратується на клієнті
  • не виконується в браузері

Це знижує:

  • розмір бандла
  • час завантаження
  • навантаження на основний потік

Чим менше клієнтського JS - тим швидша сторінка.

6. Централізоване завантаження даних

Layout дозволяє:

  • завантажити спільні дані один раз
  • перевикористовувати їх на всіх сторінках розділу
  • не робити однакові запити на кожній сторінці

Менше запитів → менше очікувань → швидший відгук.

7. Передбачувана структура рендеру

Оскільки layout жорстко прив'язаний до маршрутів:

  • Next.js може заздалегідь оптимізувати навігацію
  • простіше робити prefetch
  • менше несподіваних перемальовок

Це дає стабільну і швидку роботу інтерфейсу.

Підсумок

Layout покращує продуктивність за рахунок того, що:

  • не перемальовується при навігації
  • зберігає стан UI
  • оновлює тільки потрібні частини дерева
  • рендериться на сервері
  • зменшує клієнтський JavaScript
  • перевикористовує дані

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку