Как лучше всего иметь внешний интерфейс «publi c», генерируемый React, вместе с «частным» приложением CRA?

Question

Я использую Create-React-App и копаю всю настройку, в основном я хочу продолжить разработку с JSX вместо того, чтобы переходить на кодирование Gatsby / React-Stati c Markdown / et c стиль. Вопрос, аналогичный этому, касается Гэтсби . Я ищу оптимизированный для поисковых систем интерфейс stati c "publi c" (например, страницы продуктов, блог и т. Д. c.), Который генерируется Gatsby или react-stati c. Но мне также нужно типичное приложение React, отрисовываемое на стороне клиента, для «частного» раздела (например, продавцы могут редактировать страницы своих продуктов). Я знаю, что вы можете установить «домашнюю страницу», поэтому я подумал о том, чтобы установить частный раздел на «example.com/in/» или что-то подобное.

Есть какие-нибудь советы, как лучше всего разделить этот проект?

Answer 1

Если вы не используете GraphQL, Gatsby преимущественно просто использует React SSR и настраиваемую конфигурацию webpack с Reach Router и немного клея, чтобы склеить все это вместе.

У вас может быть абсолютно отдельная конфигурация Webpack, которая выводит в вашу public папку и настраивает ваш хост / развертывание для маршрутизации всех ваших нестатических c маршрутов к записи вашего приложения.

Вы также можете использовать Gatsby для генерации всех этих динамических c страниц с сочными запросами на стороне клиента, и вы в основном получаете бесплатные c точки входа скелета для каждой из ваших страниц, например:

const useMounted = () => {
  const [isMounted, setIsMounted] = useState(false)
  useEffect(() => {
    setIsMounted(true)
  }, [])
  return isMounted
}

const SomeComponent = props => {
  const isMounted = useMounted()

  return isMounted
    ? <div>Mounted client-side component</div>
    : <SomeComponentSkeleton />
}

Фактически это просто предотвращает проблемы с гидратацией, которые возникают, если вы возвращаете null при рендеринге на стороне сервера, а затем возвращаете компонент на стороне клиента. Вы также можете использовать isMounted для запуска любого кода, который использует window и др.