Статический и динамический рендеринг¶

В предыдущей главе вы получили данные для страницы обзора дашборда. Однако мы вкратце обсудили два ограничения текущей настройки:

• Запросы данных создают непреднамеренный водопад.
• Дашборд статичен, поэтому любые обновления данных не будут отражаться на вашем приложении.

Что такое статический рендеринг?¶

При статическом рендеринге выборка и рендеринг данных происходят на сервере во время сборки (когда вы развертываете приложение) или во время ревалидации данных.

Когда пользователь посещает ваше приложение, ему выдается кэшированный результат. У статического рендеринга есть несколько преимуществ:

• Быстрее веб-сайты - Предрендеренный контент можно кэшировать и глобально распространять при развертывании на таких платформах, как Vercel. Это гарантирует, что пользователи по всему миру смогут получить доступ к содержимому вашего сайта быстрее и надежнее.
• Снижение нагрузки на сервер - Поскольку содержимое кэшируется, вашему серверу не нужно динамически генерировать содержимое для каждого запроса пользователя. Это позволяет снизить затраты на вычисления.
• SEO - Пререндеренный контент легче индексируется поисковыми системами, поскольку он уже доступен при загрузке страницы. Это может привести к повышению рейтинга в поисковых системах.

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

Противоположностью статического рендеринга является динамический рендеринг.

Что такое динамический рендеринг?¶

При динамическом рендеринге контент отображается на сервере для каждого пользователя во время запроса (когда пользователь посещает страницу). У динамического рендеринга есть несколько преимуществ:

• Данные в реальном времени - Динамический рендеринг позволяет вашему приложению отображать данные в реальном времени или часто обновляемые данные. Это идеально подходит для приложений, в которых данные часто меняются.
• Содержимое для конкретного пользователя - Легче обслуживать персонализированное содержимое, например дашборды или профили пользователей, и обновлять данные на основе взаимодействия с пользователем.
• Динамический рендеринг позволяет получить доступ к информации, которая может быть известна только во время запроса, например к файлам cookie или параметрам поиска URL.

Моделирование медленной выборки данных¶

Приложение для дашборда, которое мы создаем, динамично.

Однако остается одна проблема, о которой говорилось в предыдущей главе. Что произойдет, если один запрос данных будет выполняться медленнее, чем все остальные?

Давайте смоделируем медленную выборку данных. В app/lib/data.ts откомментируйте console.log и setTimeout внутри fetchRevenue():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

export async function fetchRevenue() {
    try {
        // We artificially delay a response for demo purposes.
        // Don't do this in production :)
        console.log('Fetching revenue data...');
        await new Promise((resolve) =>
            setTimeout(resolve, 3000)
        );

        const data = await sql<
            Revenue[]
        >`SELECT * FROM revenue`;

        console.log(
            'Data fetch completed after 3 seconds.'
        );

        return data;
    } catch (error) {
        console.error('Database Error:', error);
        throw new Error('Failed to fetch revenue data.');
    }
}

Теперь откройте http://localhost:3000/dashboard/ в новой вкладке и обратите внимание на то, как долго загружается страница. В терминале вы также должны увидеть следующие сообщения:

1
2

Fetching revenue data...
Data fetch completed after 3 seconds.

Здесь вы добавили искусственную 3-секундную задержку, чтобы имитировать медленную выборку данных. В результате теперь вся ваша страница заблокирована от отображения пользовательского интерфейса для посетителя, пока данные находятся в процессе получения. Это подводит нас к распространенной проблеме, которую приходится решать разработчикам:

При динамическом рендеринге ваше приложение работает настолько быстро, насколько медленнее всего вы получаете данные.

Источник — https://nextjs.org/learn/dashboard-app/static-and-dynamic-rendering

Комментарии