Выборка данных с помощью маршрутов nextjs ‘catch all’

#reactjs #next.js #getstaticprops

#reactjs #next.js #getstaticprops

Вопрос:

С nextjs 10 у вас может быть общий маршрут, который выглядит примерно так [...id].tsx . Идея в том, что это позволит создавать динамические страницы. Поэтому он должен соответствовать /example , /example/new , и т.д. /example/new/latest

Проблема, с которой я сталкиваюсь, заключается в том, что для правильного отображения определенных согласованных маршрутов (например /example/new ) могут потребоваться дополнительные данные. Поскольку в моей папке действительно есть только один файл pages , у меня есть доступ только к одному getStaticProps вызову. Извлечение всех возможных данных для всех возможных маршрутов кажется довольно расточительным.

Извлечение данных на стороне сервера на уровне компонентов решило бы его проблему, но, похоже, это не поддерживается в nextjs

Есть ли рекомендуемый способ обойти это? Условная выборка данных на основе контекста внутри getStaticProps ? 🤔

Ответ №1:

То, где вы должны извлекать данные, зависит от характера ваших данных. Кроме того, когда пользователю нужны данные. Вы можете использовать getStaticProps getServerSideProps или извлекать данные на стороне клиента. Смотрите Документацию, чтобы узнать о различиях между методами.