Стоит ли использовать Next.js в рунете?

Question

[Кирилл Гаврилов]

У меня возникают сомнения по этому фреймворку с точки зрения SSR, будет ли сайт хорошо индексироваться, например в yandex, если он будет разработан на Next.js?
Решил провести небольшое исследование и проверить через сайт Сайт глазами робота, как индексируются такие сайты разработанные на next.js.
В исследование включил следующие сайты:

• Syntaxt.fm
  
• npmjs
  
• material-ui.io
  
• expo.io
  
• codemenitor.io
  

Результат: в большинстве случаев получаю ответ, что робот не видит страницы либо на сайте не обнаружены другие страницы.

Answer 1

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

Да, стоит. Потому что в противном случае Яндекс, Мейлру и т.п. поисковики не будут видеть контент твоего сайта. Гугл будет видеть, но ранжирует он SPA-сайты хуже. На своем сайте использую SSR с помощью NextJS - все отлично (у меня блог).

P.s. что касается сайтов, которые участвовали в исследовании: возможно, там SSR настроен только для определенных страниц.

Comments

[Олег Гамега]

кстати о next вы случайно не сталкивалист с тем что там линки работают через раз? я смотрел подобных issue много а решения без костылей так и не нашел

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

Олег Гамега, я вот эту либу юзаю - все работает.

[Олег Гамега]

Дмитрий Свиридов, спасибо попробую

[NikSIk31]

Дмитрий Свиридов, Здравствуйте! А почему у вас в блоге только навигация в СПА, а если кликнуть на статью блога - перезагрузка

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

NikSIk31, добрый день! Не очень понял, когда именно происходит перезагрузка. При переходе на статью из общего списка перезагрузки нет (в браузере не вращается индикатор загрузки страницы). Если Вы имеете в виду переход по ссылке в тексте статьи - да, такая проблема есть, там, действительно, происходит перезагрузка.

Дело в том, что для работы таких ссылок без перезагрузки страницы, их надо парсить их текста статьи на стороне фронтенда и рендерить как react-компоненты (сейчас это обычный тег ). А текст статьи вместе с такими ссылками у меня сейчас приходит с сервера и вставляется в страницу полностью с помощью dangerouslySetInnerHTML без какой-либо обработки в js.

[NikSIk31]

Дмитрий Свиридов, да, я имел ввиду не в навигации статьи, а в сам текст

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

NikSIk31, ну там да, парсить html надо, ссылки из него в React-компоненту для роутинга оборачивать - решил пока не заморачиваться.

[NikSIk31]

Дмитрий Свиридов, я вот думал сделать спа, и считал, что не может быть крутого сайта без спа. Мол, если я сделаю сайт без спа, то может быть он будет отсталым. Но, я заметил, что такой гигант как тостер не использует спа и чёт легче стало) и я уже мнение поменял про отсталость сайтов без спа))

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

NikSIk31, а тут дело совсем не в крутости или отсталости, на самом деле. Я вижу такие преимущества SPA-сайтов (я не конкретно про свой говорю, потому что разрабатываю его один, а вообще):

1. Бэкенд становится проще, потому что является обычным API - проще тестировать
   
2. Нет необходимости пилить отдельные API для мобильных приложений, потому что можно использовать то API, с которым взаимодействует фронтенд
   
3. Фронтенд полностью отделен от бэкенда, что позволяет фронтенд- и бэкенд-разрабам заниматься своими задачами независимо. То есть нет необходимости в fullstack-разработчиках
   
4. Возможность полностью переделывать фронтенд и бэкенд независимо, в том числе и переписывать бэкенд с пхп(например) на что-то другое, не трогая фронтенд вообще никак.
   
5. Возможность без боли использовать современные и удобные фронтенд-фреймворки, которые вкорячивать в не SPA-сайты бессмысленно и неудобно
   
6. Сайты в виде SPA работают приятнее, на мой взгляд, потому что нет перезагрузки страницы после почти любого действия. Везде можно все обвесить красивыми индикаторами загрузки, размытиями фона и т.п.
   

Если говорить о фронтенд-разработке, то в большинстве сайтов без SPA юзают jquery. С одной стороны, почему и нет. Но, с другой, когда на фронте усложняется какая-либо логика, поддерживать всю эту лапшу становится просто невозможно. Переписать нормально тоже не представляется возможным.

Насчет Тостера ничего не скажу, отталкиваюсь исключительно от своего опыта. К тому же везде по-разному. Гигант-Тостер не использует спа, а не менее гигант-Медуза использует, так что это совсем не показатель. :)

[Иван]

Здравствуйте. По поводу вашего SPA блога есть пару вопросов.
1. Какой сервер выбрали? Просто говорят, что при использовании ssr , надо чтобы ответ сервера был максимально быстрым и выдавалась информации максимально быстро роботу.
2. Получается что у вас react + next js дружат, да?
3. Были ли какие-то сбои у Гугла и Яндекса при парсинге страниц?
4. Были ли какие-то вообще проблемы при сборке проекта, devops, поддержке двух технологий React и SSR?

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

Иван, здравствуйте!

1. Сервер самый обычный и дешевый: FirstVDS (KVM, 2 ядра, 2 Гб оперативки) - вполне хватает. Единственное, не советую все это дело в докере разворачивать, потому что оперативной памяти останется в таком случае не сильно много. Проблемы с быстрой выдачей страниц решаются, как обычно, с помощью кеширования (кеширование страниц на уровне NextJS и кеширование результатов API, у меня сейчас только последнее включено).
   
2. Конечно, дружат, потому что NextJS - это фреймворк для приложений на React.
   
3. Нет, вообще никаких проблем, потому что для поисковых роботов такой сайт ничем не отличается от любого другого. При запросе страницы они получают готовый html с контентом.
   
4. Да, когда я еще не знал о NextJS и запилил рендеринг самостоятельно. Тоже индексировалось, кстати, но в плане качества кода такое себе получилось - переделывал. А так проблем не было, я достаточно быстро разобрался. Информации в интернете предостаточно.
   

[Иван]

Дмитрий Свиридов, спасибо!)

Answer 2

[Alexey]

ну как раз таки SSR и позволяет решить вопрос индексации сайта который возникает при использовании spa.

https://habr.com/ru/post/418619/ - не совсем про next.js, но про реакт.

Answer 3

[Антон Спирин]

Решил провести небольшое исследование и проверить через сайт Сайт глазами робота, как индексируются такиt сайты разработанные на next.js.

Для того чтобы увидеть сайты глазами поисковых роботов, вы использовали стороннее решение. Где логика? Зайдите в интересующий вас поисковик и посмотрите, что там проиндексировано.
Тот же, упомянутый вами, material-ui.com отлично проиндексирован.
SSR используют для индексации в поисковых системах и шаринга в социальных сетях. Робот не видит разницы со статической страницей.