Информация об использовании Gatsby для динамического приложения

Я ищу лучший стартовый комплект для приложения, которое я хотел бы начать создавать с помощью React, Redux и SSR.

Поскольку очень сложно начать с нуля, я начал искать next.js и gatsby.

На самом деле я начал реализовывать свой базовый код в обоих случаях с очень хорошими результатами.

Теперь, прежде чем переходить к более «сложным» вещам, я хотел бы лучше знать, как и поддерживает ли Gatsby динамические URL-адреса.

Мое приложение должно:

  1. Зарегистрируйтесь или войдите в систему пользователей;
  2. Отображать персональную панель управления для каждого зарегистрированного пользователя;
  3. Создайте отдельную страницу общедоступного профиля для каждого зарегистрированного пользователя.

Достичь первых двух пунктов довольно просто, но я пытаюсь понять, как обрабатывать страницу с маршрутизацией, которая должна быть примерно такой: /users/:id/:nickname.

Я смотрю в Google и вижу странные вещи, связанные с задачами cron, чтобы перестраивать приложение каждые x минут (то, что я бы вообще не хотел делать).

Затем я нашел Создатели связанных действий, просмотрев документацию Gatsby, но, как обычно, понять документацию на 100% всегда сложно: что это? Как и где это использовать? Могу ли я использовать метод createPage на уровне редукции? Отображается ли это на стороне сервера?

Может ли кто-нибудь сказать мне, подходит ли этот продукт для достижения того, что я объяснил выше, и, возможно, связать некоторые образцы, фрагменты или небольшие фрагменты кода, чтобы помочь мне понять его, прежде чем я начну писать много кода, который может оказаться бесполезным?

Ваше здоровье.

Насколько я знаю, Гэтсби загружает динамические данные в свое хранилище GraphQL во время сборки. Таким образом, вам нужно перестраивать каждый раз, когда происходит изменение. Я думаю, что вам нужен Express как бэкэнд для динамической маршрутизации. Или в этом вам может помочь маршрутизатор React.

cajak 04.08.2018 07:31
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
1
483
1

Ответы 1

Я не знаком с next.js, но вы можете создавать динамические URL-адреса из данных с помощью Bound Action Creator. Вот шаги.

  1. Вам нужен источник данных на GraphQL.
  2. Вам необходимо преобразовать ваш источник данных в GraphQL. Если у вас есть сервер GraphQL, вы можете использовать существующий плагин исходного кода, gatsby-source-graphql.
  3. Вам необходимо настроить исходный код плагина в файле gatsby-config.js.
  4. Вам необходимо настроить динамический URL-адрес и страницу в файле gatsby-node.js.
  5. Создайте страницу-шаблон для динамического содержимого и URL-адреса.

https://github.com/jlengstorf/gatsby-with-unstructured-data/tree/using-gatsby-data-layer Это пример сайта gatsbyjs, использующего pokemon REST API. Он создает динамический URL-адрес из данных с помощью настраиваемого плагина GraphQL, который импортирует REST API.

https://www.gatsbyjs.org/starters/gatsby-starter-blog Это статичный сайт, но он использует локальную файловую систему в качестве источника GraphQL. Это полезно для понимания того, как шаблон и узел gatsby работают вместе.

Удачи.

Другие вопросы по теме