Какой самый практичный способ рендеринга динамических компонентов в Next.js?

avatar
buzz
8 августа 2021 в 20:51
439
1
0

Я новичок в Next.js и преобразовываю свое старое реагирующее приложение в приложение Next, чтобы использовать преимущества SSR для SEO (помимо других отличных функций, которые предоставляет Next). В настоящее время моя настройка компонента:

Домашняя страница

  • о(компонент)
  • ... компоненты кузова
  • контакт(компонент)

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

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

Могу ли я выполнять все вызовы выборки в getServerSideProps и передавать их своим компонентам? И если да, то является ли это плохой практикой/решением моей проблемы?

Источник
evolutionxbox
8 августа 2021 в 20:55
0

Что заставляет вас думать, что это плохая практика?

buzz
8 августа 2021 в 21:41
0

@SeanW Я стараюсь не перестраивать приложение при каждом обновлении.

buzz
8 августа 2021 в 21:42
0

@evolutionxbox просто проверяет, есть ли более эффективный способ сделать это

buzz
8 августа 2021 в 21:43
0

@SeanW каждые 2-3 дня

buzz
8 августа 2021 в 21:44
0

@SeanW Я использую CMS

evolutionxbox
8 августа 2021 в 21:51
1

Если вы ищете более эффективный способ написания кода, я бы порекомендовал вместо этого посетить codereview.stackexchange.com?

Ответы (1)

avatar
Sean W
8 августа 2021 в 22:01
1

Поскольку у вас нечастые сборки и небольшое количество страниц, вы можете использовать любой из трех типов сборки, которые предлагает Next.js.

Если вы используете хостинг Vercel, решение о развертывании зависит только от вас. Если вы их не используете, скорее всего, не стоит пытаться настроить ISR или SSR на текущем этапе.

Вот рекомендации Next.js при получении данных. Эта страница также содержит множество настроек CMS.

Создание статических сайтов (SSG)

SSG, вероятно, является самым простым из решений и, вероятно, больше всего похож на то, как развертывается базовое ванильное приложение React.

Поскольку у вас есть несколько страниц и нечастые сборки, это отличное решение (это то, что я бы использовал, но в основном я использую AWS). Сайт SSG будет создан за 1-2 минуты, и вы можете автоматизировать этот процесс с помощью чего-то вроде GitHub Actions. Вот простое видео с использованием SSG, GitHub Actions и AWS.

Пошаговая статическая регенерация (ISR).

Немного более сложная установка, но этот подход позволит быстрее перестроить систему с теми же преимуществами, что и SSG. Вот хорошая статья об этом подходе.

Визуализация на стороне сервера (SSR)

Создание серверного приложения с использованием реквизитов getServerSide — вполне жизнеспособное решение. Этот подход также позволит вам использовать все функции Next, такие как Изображение, которые в настоящее время недоступны при других подходах.

Tim
16 октября 2021 в 19:48
0

Что вы подразумеваете под следующим/изображением, недоступным для других подходов? Насколько я знаю, ни один из методов выборки данных Next.js не влияет на next/image.

Tim
18 октября 2021 в 09:22
0

Ах понял! Поскольку вы упомянули next/image только для SSR, я предположил, что вы имели в виду, что он недоступен для других подходов, таких как SSG.

Sean W
18 октября 2021 в 16:20
0

Ваши предположения были правильными. В настоящее время вы не можете использовать next/image с экспортированным сайтом (например, SSG) с загрузчиком по умолчанию. Next/image манипулирует изображениями в режиме реального времени на сервере. Нет сервера для обработки изображений после экспорта сайта — это просто статические файлы. Однако вы можете создать пользовательскую конечную точку загрузчика/API за пределами вашего статического сайта или использовать стороннюю службу и указать следующему/изображению использовать этот загрузчик. nextjs.org/docs/api-reference/next/image вот несколько альтернатив для статического сайта maxrohde.com/2021/07/25/next-js-11-images-with- статический экспорт

Tim
19 октября 2021 в 08:56
0

Извините, я имел в виду развертывание в Vercel, где вы можете использовать методы выборки данных SSG и SSR без какого-либо влияния на следующее/изображение из коробки. Но да, вы правы, не используя Vercel, это требует дополнительных усилий.