Как создать много индексируемых страниц на React сайте?

Question

[qqqaa]

Мой веб-сервер представляет собой express js, отправляющий фронтенд (html файл из папки build проекта, основанного на create-react-app) клиенту в ответ на запрашиваемые url. На фронтенде стоит React routes, которые рендерят страницы в зависимости от url-а. Соответственно, с сервера отправляется только один html файл, и у него есть свой title, description и т.д. - все, что мог бы увидеть пользователь в поисковике.

Проблема: пользователь в поисковике может видеть только 1 единственную ссылку на данный сайт, в поисковике всегда будет 1 и тот же title, description сайта, т.к html файл на сервере только один. Нужно, чтобы для каждой отрисовывающейся с помощью React routes страницы отображалась в поисковике (Google, Яндекс) соответствующая ссылка со своим уникальным title и description.

Как это сделать?

К примеру, так это работает у ВКонтакте:

Answer 1

[Антон Горецкий]

Вам нужно использовать SSR - рендеринг на стороне сервера. Переходите на фреймворк Next.js - это тот же реакт, но использующий SSR. Причем там можно рендерить как динамические страницы, так и сделать кеш для статичного контента.

Comments

[qqqaa]

А как будет работать индексирование страниц с сервера? Т.е. на сервере будет лежать несколько html-ок, и поисковые роботы будут как-то их считывать?

[szQocks]

qqqaa, можешь сделать так что там на каждую страницу будет свой html файл и данные в них, ну то есть само содержимое html файлов можно обновлять например 1 раз в день - автоматом, не ручками, прикинь ?) , и да роботы их как-то будут считывать, там много полезного.

[Антон Горецкий]

qqqaa, все как в обычном реакте. Только в реакте рендер страницы по определенному роуту происходит в браузере, а в Next такой же рендер происходит на стороне сервера. Поэтому поисковики видят готовый HTML код и могут проиндескировать его.

[qqqaa]

Антон Горецкий, Простите за такой вопрос, но, получается, получится используя next.js создать сайт, у которого будет много страниц, которые будут показываться разными в поисковиках, как у ВК, как показано на картинках?

[Антон Горецкий]

qqqaa, да именно для этого фреймворк next.js и сделали. Там есть свои компоненты, которые позволяют добавлять разные заголовки, описания и прочие теги на разные страницы.

[qqqaa]

Антон Горецкий, а есть ли в нем возможность генерировать автоматически эти страницы? Т.е. я же не буду для каждого пользователя создавать на сервере свои файлы, чтобы на них были ссылке в поисковике, или как это делается?

[Антон Горецкий]

Если у вас есть информация которую вы можете подставлять динамически в названия или теги страниц - то всё будет генерироваться автоматически. Всё зависит от программиста и какой результат он хочет получить. Посмотрите на ютубе есть много туториалов по этому фреймворку - все вопросы отпадут.

[qqqaa]

Антон Горецкий, все, спасибо большое