Как работают SSR компоненты?

Question

[yarlavanda]

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

Если я правильно понимаю работу Next.js: компоненты без состояния рендерятся на сервере и могут индексироваться поисковыми роботами. А с состоянием - на стороне клиента, и роботы их не видят.

Однако в компоненте самой страницы ArticlePage у меня в любом случае будет использование useState. Значит ли это, что вся страница будет отрисовываться на клиенте? И что поисковые роботы обойдут контент страницы стороной?

P.S. Вопрос, возможно, глупый, но я правда не понимаю...

Comments

[Aetae]

Не знаю как nextjs - они дохрена намудрили и всё запутали(мне лень разбираться, я вообще реакт не использую), но нормальный SSR работает просто:
При первом* обращении к странице извне он рендерит страницу также как на клиенте со стейтом по умолчанию.
Т.е. если у тебя что-то происходит в useEffect(т.е. после первой отрисовки) - оно произойдёт только уже на клиенте. Если просто в useState сразу кладётся то, что уже есть - оно отработает нормально.

Если нужно наполнить всё данными заранее, то разные SSR-фреймворки предлагают разные способы "подождать данных" перед отдачей, всякие asyncData, fecth, поддержка async-await...

Но если брать всё это дело в чистом виде и делать руками, то серверный код абстрактно будет выглядеть так:

server.get('/', async (req, res) => {
  try {
    const baseData = await fetch('/data').then(data => data.json());
    const html = await renderAppToString(<App data={data}></App>);

    res.send(html);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

Т.е. при запросе / ты руками получаешь стартовые данные, и руками их кладёшь в создаваемое приложение, после рендера которого сервер просто отдаёт результат.

Фреймворки всё это абстрагируют и упрощают, плюс есть возможность хранения стейта под клиента с сессиями и всем таким прочим, но суть всё та же - ты должен использовать предоставляемые фреймворком нестандартные для чистого React методы, чтоб он наполнил компоненты данными перед отдачей.

* Всегда стоит помнить, что для обычного пользователя SSR начинается и заканчивается при первом заходе на страницу, дальше приложение работает как обычное SPA. Только боты, которые получают каждую страницу отдельно будут получать SSR версии каждой страницы.

[szQocks]

они дохрена намудрили и всё запутали

- да там чёрт ногу сломит, кароч там как плюсы есть так и минусы, лучше и не разбираться в этом, вообще жалею время которое потерял на изучение next, next это mvp , это не готовый продукт к употреблению, он ещё не готов, как бы они там не ласкали его

yarlavanda - забей болт причём огромный на этот ssr

[yarlavanda]

szQocks, Как же тогда делать seo оптимизированный сайт?

[szQocks]

yarlavanda,так же , как и без ssr, роботы давно уже умеют анализировать динамический контент, вот тебе простой пример, сайт в топ 2 по запросу который я ввёл

[yarlavanda]

szQocks, То есть, я могу создать сайт тупо на react и страницы будут индексироваться?

[szQocks]

yarlavanda, прикинь будут индексироваться, сам проверял, но вот попадёшь ли ты в топы, тут вопрос далеко не в ssr

[yarlavanda]

szQocks, Стоит над семантикой поработать?

[szQocks]

yarlavanda, сайт сначала создай, а потом уже забивай башку дебильными вопросами

[yarlavanda]

szQocks, Понял, спасибо чел!

[Andrei SunnyPh]

yarlavanda, что бы делать сайты с техническим SEO, и напрямую настраивать рендеринг отдельных страниц и компонентов как SSR или рендеринг на клиенте Microsoft сделала Blazor, в котором учла все эти возможности....По Web Core Vitals и другим критериям клиентские и серверные части написанные с использованием JavaScript, в ближайшем будущем будут нерно курить в сторонке....Однако что бы писать на Blazor, нужно знать C#, разбираться также в JS....И конечно же на данный момент в Blazor нет такого количества библиотек или пакетов как для React....

[Михаил Р.]

Andrei SunnyPh,

По Web Core Vitals и другим критериям клиентские и серверные части написанные с использованием JavaScript, в ближайшем будущем будут нерно курить в сторонке...

И конечно же на данный момент в Blazor нет такого количества библиотек или пакетов как для React...

Чтобы написать фронт, надо знать c#, который и на сервере далеко не самый популярный яп, да и вакансий как то на blazor маловато, ну как мало - их нет (в рамках погрешности).

в ближайшем будущем будут нерно курить в сторонке...

Конечно будут, как курит php, java и python.

Answer 1

[Михаил Р.]

Если я правильно понимаю работу Next.js: компоненты без состояния рендерятся на сервере и могут индексироваться поисковыми роботами

Верно, индексация стандартная.

А с состоянием - на стороне клиента, и роботы их не видят.

Не совсем. Поисковики индексируют динамику, но ограниченно, и она проиграет классической статике или ssr. То, что Вы видите динамику в топе - это не заслуга динамики, а недоработка конкурентов со статикой.

Однако в компоненте самой страницы ArticlePage у меня в любом случае будет использование useState. Значит ли это, что вся страница будет отрисовываться на клиенте?

Не совсем. Часть страницы будет отрисована на сервере, а часть на клиенте.

И что поисковые роботы обойдут контент страницы стороной?

Нет, контент в любом случае будет ранжироваться, но не лучше классической статики при прочих равных.

P.S. Вопрос, возможно, глупый, но я правда не понимаю...

К нексту у многих имеются вопросы, поэтому Вы не первый и уж тем более, не последний :)