Какой был бы идеальный подход к выборке для большой страницы блога NextJS для отличной производительности и SEO?

Question

Я работаю над личным портфолио/страницей блога, используя NextJS 12 и Strapi в качестве CMS. Логика веб-сайта будет похожа на шаблон блога NextJS (ссылка на репозиторий Github: https://github.com/leerob/leerob.io).

В моем разделе /blog отображаются все сообщения в блоге, и для извлечения всех сообщений используется инкрементная статическая регенерация NextJS.

      export async function getStaticProps() {
    const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?populate=*`);
    
    const posts = await res.json();

    return {
        props: {
            posts,
        },
        // Next.js will attempt to re-generate the page:
        // - When a request comes in
        // - At most once every 60 seconds
        revalidate: 60, // In seconds
    };
}

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

Чтобы немного подчеркнуть ситуацию, я создал сотни случайных сообщений от Strapi. Тем не менее, я показываю только пару из них в начале, просто чтобы не заполнять DOM всеми этими элементами сразу и дать пользователю возможность загружать больше сообщений с помощью кнопки (пример ниже).

Но я понял, что запрос на выборку, который получает все сообщения, стал несколько большим (~1-2 МБ), до уровня, при котором даже NextJS выдал мне следующее предупреждение:

«Внимание: данные для страницы «/blog» составляют 1,5 МБ, что превышает порог в 128 КБ, такой объем данных может снизить производительность. Подробнее см. здесь: https://nextjs.org/docs/messages/large-page- данные".

Означает ли это, что getStaticProps — плохой выбор для этого случая? Если да, то каким будет идеальный подход к выборке для большой страницы блога NextJS для отличной производительности и SEO?

Я рассматриваю возможность перехода на разбивку на страницы на стороне сервера для /blog и getStaticPaths для /blog/[slug], чтобы поддерживать высокую производительность SEO по сравнению с рендерингом на стороне клиента.

Я попробовал добавочную статическую регенерацию, но это (возможно?) снижает производительность крупномасштабных приложений, поскольку размер запроса на выборку увеличивается.