Как лучше всего иметь статический (SEO) общедоступный интерфейс, сгенерированный React, вместе с частным приложением CRA?

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

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


reactjs create-react-app gatsby react-static
person Phil Gresham    schedule 04.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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 et al.

person coreyward    schedule 04.05.2020