Как построить SPA из многостраничного сайта без потери поискового трафика?

Question

[Иван Антонов]

Что Angular.JS, что React.JS строят дом исключительно в JavaScript. И получается так, что поисковые роботы получают пустые страницы с кучей javascript'а.

Если предположить, что у нас уже есть готовый сайт состоящий из бэкэнда и обычной вёрстки. Как сделать из него SPA? Да так, что бы шаблон полностью сохранился для бота, а для обычного пользователя (имеющего включённый JS) все происходило как в SPA. Только нативным JavaScript'ом? Популярные фреймверки этого не умеют?

Comments

[Антон Швец]

Зависит от сайта. Может вам всего лишь контент надо подгружать.

[wisgest]

Зачем портить готовый сайт? JavaScript должен быть unobtrusive!

[FanatPHP]

А зачем?

Answer 1

[Денис Инешин]

Ответ прост - серверный рендеринг страниц. Все современные фреймворки это умеют:
- https://angular.io/guide/universal
- https://css-tricks.com/server-side-react-rendering/
- https://vuejs.org/v2/guide/ssr.html

Comments

[Иван Антонов]

Я тут на хабре минусы прочитал:
- актуальность данных важна и быстро меняется
- объем данных не позволяет построить статику
- построение статики слишком долгое для вас

[Денис Инешин]

Иван Антонов, и где это вы почитали?

Все пользуются, мы пользуемся. Куда не ткни - любая компания пользуется.

[Дмитрий Свиридов]

Иван Антонов, "актуальность данных важна и быстро меняется" - о чем именно идет речь? Когда поисковый робот дергает ту или иную страницу, на сервере NodeJS выполняет js-код, и выплевывает html. Это не пререндер какой-то, который отрисовал страницу один раз и каждый раз одно и то же отдает. Можно закешировать, да, но это и в обычных сайтах делают. Насчет двух других пунктов не очень понял.

[Mikhail Osher]

nextjs ещё в список можно добавить

Answer 2

[xmoonlight]

Если Вы сможете возвращать контент нодами с бэкенда, можно сделать так:
1. Создать на бэкенде API по возвращению конкретных нод (GUI-блоков)
2. На фронте - использовать includeHTML, когда нужно будет делать переходы и загружать разный контент в разные блоки.

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

Comments

[Uldan Almatakyzy]

Для vue есть библиотека nuxt. A для react next js. Придётся менять роуты и моунтинг. Но там сильно не отличаются. Просто рендеринг идёт с сервера