2016-12-13 3 views
1

Реагировать приложения визуализировать компоненты «на лету», динамически, поэтому он не позволяет поисковым системам индексировать страницы и усложняет социальный обмен. Какова наилучшая практика для решения таких проблем и сделать приложение React-Redux удобным для SEO?SEO-friendly React-Redux app

ответ

1

Нам нужна поддержка на стороне сервера, чтобы сделать SEO для приложения React!

Разделим архитектуру приложения на три части: сервер API, предоставляющий данные, веб-сервер, который будет совместно использовать код с клиентской стороны, а также отображать HTML, и, наконец, клиент, то есть код, который запускается в браузера.

В принципе, визуализация на стороне сервера позволит частично запустить часть вашего кода на вашем сервере. Это означает, что сервер сначала получит данные из вашего API, которые необходимы для рендеринга на HTML-странице начальной страницы, а затем он будет отправлять и отправлять эти данные клиенту.

После того, как клиент получит исходный HTML-код страницы и необходимые данные, он продолжит весь бизнес-рендеринг JavaScript, но у него уже есть все необходимые данные. Таким образом, используя небольшой пример выше, SPA-рендеринг на стороне клиента должен начинаться с нуля, но серверный рендеринг SPA будет в начальной точке, где у них уже есть все данные. Таким образом, это решает SEO и замедляет первоначальные проблемы с загрузкой, которые предоставляют СПО).

Это похоже на довольно интуитивную идею, но это было воспринято более серьезно, когда React вышел, поскольку React позволяет вам делать рендеринг на стороне сервера элегантным образом.

Чтобы подвести итог, на стороне сервера рендеринга может быть разбита на 3 этапа:

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

(2) Извлеките HTML используя эти данные.

(3) Пакет HTML и отправьте его на клиентскую сторону.

Для более по этой ссылке:

https://www.codementor.io/reactjs/tutorial/redux-server-rendering-react-router-universal-web-app