Какие плюсы и минусы есть в плане производительности, SEO и т.д. если делать статичный landing page сайт на React.js/Vue.js?

Question

[Danny13]

Добрый день,

я задумался над таким вопросом, какие бенефиты разработчик получает если выбирает react.js или vue.js как технологию для landing page сайта? Сайт будет быстрее грузится? SEO пострадает, так как не будет множества страниц или это не имеет значения? Я был бы рад если бы специалисты react.js или vue.js поделились бы своим мнением.

P.S. В последнее время вижу, что landing pages стали делать на react.js, vue.js хотя там нету прямой интеракции с пользователем в плане удаления, сохранения чего-либо. Просто статичный сайт, рекламирующий услуги. Поэтому я и задумался, почему react, почему бы просто не сделать на html/css/sass + materialize или boostrap.

Спасибо

Comments

[Егор Живагин]

Потому что "все на веб-фреймворках делают, вот и мы делать будем"
Нет причин юзать React для лендингов. Это ухудшение производительности и раздувание размера скриптов (пусть и небольшое) на пустом месте

[Dima Polos]

Егор Живагин, ооо, под каждым словом подписываюсь!!!!

[Aetae]

Потому что быстрее (намного). Потому что приятнее разработчику (намного). А то чnо вместо jquery юзер загрузит vue - разницы в трафике никакой.

[WapSter]

Aetae, вопрос нафига грузить вообще библиотеки лишние, если можно этот функционал зафигачить на чистом js. Что-то мне не кажется, что на лендингах подобных юзаются какие-то функции кроме работы с dom еще и минимальные.

Потому что приятнее разработчику (намного)

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

[Dima Polos]

Aetae, быстрее чем тупо html и css? на лендингах максимум модалку открыть-закрыть, я не говорю о том, когда на лендинге какой-то сверхсложный калькулятор или что-то типа Figma, а простая статика - текст и картинки, даже ссылки и те якорные

[Aetae]

WapSter, тот же vue - развращает: ты уже не хочешь "функции работы с dom", хочешь работать с данными, а оно всё чтоб само.)
Ну и естественно никаких затруднений, если у тебя есть любовно настроенный стартовый проект со всем что тебе нужно и всем к чему ты привык. Впрочем как и в классическом случае.
Dima Polos, да когда ты последний раз html\css чистый видел? Всё должно крутиться, вертеться и сверкать.

[Dima Polos]

Aetae, ну да, тут может еще от дизайна зависит, но все-таки есть много как таких, так и других) анимация на css не плохо пишется, только если не какой-то webgl или что-то в таком духе

Answer 1

[Никита]

Зачем делать лендинг на фреймворке. ИМХО. Я против применения даже JQuery. Вот, какую задачу может решить Vue.js в лендинге!? Оживить карусель можно и руками.

Comments

[Dima Polos]

через css или js?
В целом я с Вами согласен)

[Никита]

Dima Polos, мне кажется нативный js не в таком младенческом состоянии уже, чтобы подключать доп. библиотеки

[Dima Polos]

Никита Пурыга, я об этом ии не намекал, просто решил уточнить, что слайдер Вы имели ввиду на js, а то есть умельцы на css)

Answer 2

[Dima Polos]

Я не понимаю этого. Делать лендинги или обычные контентные сайты на vue/react.
SEO - страдает, но вроде как тенденция получше, и да, ssr... Но стоп, когда-то сайты собирались на бекенде и отдавались на клиент готовые, теперь сделали, чтоб на клиент отдавалась пустая почти страница, а там уже на клиенте все происходило, но seo и давайте сделаем, чтоб на сервере собиралась, а потом на клиенте... РЕКУРСИЯ??
Поддержка старых браузеров и слабых устройств - страдает.
Производительность и потребление трафика - страдает.
Плюсы? Ну, можно сказать, что сайт на vue/react, это модно. Вот плюс...
Другое дело, где на сайте реально SPA, тогда да, или много специфических контроллов.
Скорее всего, со мной начнут спорить, ну, велкам) Мне интересно узнать самому, зачем делают лендинги на реакте)

Comments

[Дмитрий]

Мне интересно узнать самому, зачем делают лендинги на реакте)

Имеет смысл, если на лендинге есть какой-то интерактив типа квиза, сложных форма и т.д. В большинстве остальных случаев не имеет.

[Dima Polos]

Дмитрий, Да, я как раз об этом

Answer 3

[McBernar]

Удобно работать с компонентами, удобно работать с js, одной консольной командой разворачиваешь настроенный проект со всеми es-фичами.

Для SEO реакт/вью до сих пор очень плохо работают. Туда либо SSR прикручивают, либо генерируют html-статику в том же next/nuxt.

Answer 4

[Alex]

какие бенефиты разработчик получает если выбирает react.js или vue.js как технологию для landing page сайта?

Все бенефиты которые даёт фреймворк. Но далеко не все они оправданы для такой задачи.

Сайт будет быстрее грузится?

Нет. Наоборот.

SEO пострадает

Зависит от того, как конкретно сайт. Но, скорее всего, да, если конечно не используется SSR.

так как не будет множества страниц или это не имеет значения?

Наличие множества страниц не имеет никакого значения

В последнее время вижу, что landing pages стали делать на react.js, vue.js хотя там нету прямой интеракции с пользователем в плане удаления, сохранения чего-либо

Я вижу этому несколько причин:

1. Когвеерная разработка. Когда нужно максимально быстро выпускать продукты, не заботять о дальнейшей поддержке или перформансе.
   
2. Когда, так называемые Front-end developer-ы не умеют в HTML/CSS/JS/верстку, а только в React/Vue.
   

В целом, нет ничего плохого в том, чтобы разрабатывать статичный сайт на React/Vue. Вы получаете удобство компонентного подхода, изоляцию CSS и так далее. Но на продакшн, React/Vue попадать не должен, если речь идет именно о статическом контенте. То есть, вы пишете сайт на React/Vue, но не опираетесь на реактивность. По сути, у вас набор отдельных компонентиков со статикой. Потом вы это всё компилируете в статичный HTML+CSS и выливаете на прод.

UPD.
Посмотрите на Static Generated (Pre Rendering) в nuxtjs

Answer 5

[Евгений]

Почитай про Gatsby https://www.gatsbyjs.org и Gridsome https://gridsome.org
Коротко:
> Сайт будет быстрее грузится?
Да, за исключением 1-но страничных
> SEO пострадает
Нет
> почему бы просто не сделать на html/css/sass + materialize или boostrap
Тоже можно, зависит от задачи

Comments

[WapSter]

Гэтсби это уже не про статический сайт.

[Евгений]

WapSter,
https://www.mediacurrent.com/blog/what-is-gatsbyjs/
Цитата:
What is Gatsby?
Gatsby is a React-based, GraphQL powered, static site generator.

Мета Gatsbyjs.org: Blazing fast modern site generator for React. Go beyond static sites: build blogs, e-commerce sites, full-blown apps, and more with Gatsby.

Или мы про разную "статичность" или ты о том, что в школу все едут на автобусах, поэтому машины туда не ходят...