Почему сайт vuejs.org не SPA?

Question

[Сергей Малинин]

Изучаю vue.js. Естественно, представляя, как теперь всегда буду использовать SPA с серверным рендерингом. Но потом обратил внимание, что даже сам сайт vuejs.org не является SPA.

В связи с этим вопросы:
1. Как Вы считаете, почему vue.js.org не сделали как SPA? Это же просто контетный сайт.
2. Говорят, что SPA не стоит использовать в интернет-магазинах.
Почему, если можно рендерить на сервере и индексация, по-идее, не должна страдать.
2. В каких реально случаях стоит делать SPA, каких не стоит?

Реальных причин, почему бы всегда не писать SPA я не вижу

Answer 1

[Иван Шумов]

Как бы кто там ни пытался говорить что поисковики с ним дружат - это не так, совсем не так

Comments

[Сергей Малинин]

А как же, например, сайты медузы или тжорнала?
Они онлайн-сми, для которых нормальная оптимизация очень важна. Им же как-то удалось "подружить" СПА с поисковиками

[Иван Шумов]

Сергей Малинин, это называется SSR. Только интегрировать его не всегда стоит. Вообще надо разделять понятия статики и SPA по тому что предназначены они для разных задач. SSR для SPA придумали чтобы лечить последствия, а не корневую проблему.

Многие компании используют так называемый static render вообще

[kolkov]

Google на ура кушает SPA, даже в топ выводит.

[Иван Шумов]

kolkov, примеры в студию

[rustambmt]

Можно использовать смешанный подход, например https://intoleranciadiario.com/ - хотя это MPA но с элементами SPA.

Проблема SPA и поисковиков в том, что фреймворк пытается построим VDOM, сравнить
с тем что загрузилось, и если не одинаково, то обновить. Поисковикам это очень не нравится, по многим причинам, начиная от времени загрузки всего этого добра до специфических деталей.

Но простых примерах vue и react там все быстро и норм, в реальном приложении - туча гемора. Одно из решений это отказаться от построения VDOM после загрузки страницы (то есть отказаться от фреймворка по факту), а рендерить по факту, когда пользователь произвел какие то действия - и это вполне рабочая идея. В конце концов, к примеру, react тоже эволюционирует в эту степь (portal).

Answer 2

[wizzzet]

Да, мы делали много магазинов на SPA. Основная проблема - системы аналитики и ретаргетинга глючат. Google Analytics и Метрика теряют источники переходов, что критично для партнёров, занимающихся предоставлением в интернет-магазин лидов, потому что они, как правило, берут деньги за заказы клиентов магазина, и им сложно доказать источник заказа (по utm-меткам). Также, большая нагрузка на сайт с SSR (северный рендеринг) подразумевает организацию кэширования компонент, что тоже не всегда просто.

Если у вас обычный контентный сайт, и нет сложных воронок продаж, то можно использовать SPA, даже без сложных интерфейсов, так страницы как правило открываются быстрее (кроме самой первой, если не SSR).

Comments

[kolkov]

Все нормально там с переходами, просто уметь нужно настроить грамотно.

[wizzzet]

kolkov Здравствуйте! Если не трудно, можете народу кинуть ссылку на какой-нибудь мануал? Это сейчас злободневная проблема. Спасибо!

Answer 3

[xmoonlight]

1. SPA - это (на данный момент!) пользовательский функционал после авторизации: ЛК, админка, статистика и т.д.
2. Статику - для поисковых систем со всеми тонкостями и их требованиями к SEO.

Comments

[kolkov]

Google отлично кушает, рендерит, индексирует SPA.

Answer 4

[Alex]

Потому что есть более производительное решение для статического контента — генерация большого числа статических файлов

Answer 5

[Алекс Глебов]

представляя, как теперь всегда буду использовать SPA

Не spa единым. Ниша spa это интерфейсы, где много логики и аякса.

Answer 6

[rustambmt]

Все просто, Гугл использует порядка 10 различных движков для различных кейсов. И все они ведут себя странно с большими скриптами (где-то даже пробегало то, что движок ждёт порядка 10 секунд и если скрипт не заканчивает работу то тупо его прибивает) Вот тат, например написано что они типа апнули гуглбот до 41 версии
https://www.google.com/amp/s/searchengineland.com/...

Это конечно хорошо....но во первых везде ли ?)
А во вторых, crawler не любит по прежнему когда страница "дорендивается" после загрузки. Это беда большинства популярных фреймворков и ошибка всех начинающих программеров, которые изучив какой нибудь фреймворк, типа react, Vue и пр. Начинают бацать сайты и потом вдруг оказывается что страница не кэшируется поисковиком...и тут они начинают разводит руками и жевать сопли.

Comments

[kolkov]

С гуглом все отлично, у них evergreen в боте встроен. Отлично кушает SPA, не рекомендуется SSR.

[rustambmt]

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

SEO по этому поводу, будут вопить и стучать кулаками по столу требуя кэширование )) Ибо для них это свято
https://www.boostability.com/why-google-cache-is-i...

Answer 7

[777Polar_Fox777]

В Chrome в инструментах разработчика есть вкладка Audits, там вы можете запустить Lighthouse и проверить хорошо ли ваше приложение распознаётся поисковиком, а так же получить множество советов для улучшения.

Comments

[rustambmt]

в реальной жизни все не так просто
проверьте на любом реакт (или вью) сайте, а потом посмотрите кэш страницы в гугле и удивитесь

сама гугл признает это, и для таких кейсов предлагает динамический рендеринг
https://developers.google.com/search/docs/guides/d...

но там возникают уже другие проблемы, выходящие за рамки тукущего треда

Answer 8

[Владимир Кочергин]

1. Как Вы считаете, почему vue.js.org не сделали как SPA? Это же просто контетный сайт.

Тут скорее надо задавать вопрос "зачем его делать SPA?" В расшифровке этой аббревиатуры уже есть ответ.

"2. Говорят, что SPA не стоит использовать в интернет-магазинах.
Почему, если можно рендерить на сервере и индексация, по-идее, не должна страдать."
Для этого бэкенд должен быть на js (на сколько я знаю, другого решения без костылей ещё нет). А это не лучший вариант и не всем подходит.

"2. В каких реально случаях стоит делать SPA, каких не стоит?"
Когда нужен интерактив c динамически меняющимся контентом на странице (для чего, собственно, эта технология и была придумана).