Чудова робота! Ми отримали деякі дані та успішно відобразили їх користувачу. Однак виникла проблема. Вона полягає у використанні статичної панелі, через що будь-які оновлення даних не відображаються в застосунку.

Розгляньмо поняття статичного та динамічного рендерингу.

Статичний рендеринг

Статичний рендеринг означає підготовку та показ вмісту ще до того, як користувач його запитає. Це схоже на приготування великої кількості бутербродів до приходу гостей на вечірку.

Приклад

Уявіть, що ви організовуєте пікнік. Замість того, щоб готувати бутерброди, коли гості вже прийшли, ви готуєте їх заздалегідь і викладаєте на стіл. Коли люди приходять, вони просто беруть готовий бутерброд. Це робить процес швидшим і зручнішим для всіх.

Переваги

• Швидші вебсайти: Як і з готовими бутербродами, попередньо підготовлений вміст можна швидко та легко надати користувачам;
• Менше навантаження на сервер: Оскільки все підготовлено заздалегідь, серверу не потрібно "готувати бутерброди" (генерувати вміст) для кожного користувача окремо;
• Краща індексація пошуковими системами: Пошуковим системам легше зрозуміти та проіндексувати попередньо підготовлений вміст, як і добре організований стіл на пікніку.

Застосування

Статичний рендеринг ідеально підходить для таких сторінок, як статичні блоги або сторінки товарів, де вміст майже не змінюється і є однаковим для всіх користувачів.

Динамічний рендеринг

Динамічний рендеринг означає створення контенту безпосередньо під час запиту користувача. Це схоже на шеф-кухаря, який готує індивідуальні страви для кожного клієнта в ресторані.

Приклад

Уявіть ресторан, де шеф-кухар готує страви відповідно до замовлення кожного клієнта. Шеф отримує замовлення, готує страву та подає її свіжою. Це нагадує динамічний рендеринг, коли контент генерується для кожного користувача, який відвідує сторінку.

Переваги

• Оновлення в реальному часі: Як і шеф-кухар, який використовує свіжі інгредієнти, динамічний рендеринг дозволяє вашому застосунку відображати дані в реальному часі або часто оновлювану інформацію;
• Персоналізований контент: Як шеф-кухар, який готує страви за вподобаннями клієнта, динамічний рендеринг ідеально підходить для відображення персоналізованого контенту, наприклад, інформаційних панелей або профілів користувачів;
• Доступ до інформації, специфічної для користувача: Це як шеф-кухар, який запитує вподобання клієнта перед приготуванням – динамічний рендеринг дозволяє отримувати інформацію, специфічну для кожного користувача, наприклад, cookies або параметри пошуку в URL.

Сценарії використання

Динамічний рендеринг корисний для застосунків, де дані часто змінюються або важлива персоналізація контенту, наприклад, стрічки соціальних мереж чи інформаційні панелі в реальному часі.

Повертаємось до проєкту

Для нашого застосунку ми завжди прагнемо відображати найактуальнішу інформацію.

Під час використання @vercel/postgres правила кешування не визначені за замовчуванням, що дає нам гнучкість у виборі способу обробки даних – статично чи динамічно.

Щоб зробити інформаційну панель динамічною, можна скористатися функцією Next.js під назвою unstable_noStore. Вона дозволяє пропустити статичний рендеринг. Ось як це зробити:

У файлі data.ts додайте рядок import unstable_noStore from next/cache на початку. Потім використовуйте його у функціях отримання даних, щоб налаштувати спосіб обробки даних.

На практиці