Как работают SSR компоненты?
Представим, что у меня есть большая страница, например, страница с информационной статьёй (ArticlePage). На этой странице есть, как серверные компоненты (блок с текстом статьи), так и клиентские (кнопка для добавления в избранное).
Если я правильно понимаю работу Next.js: компоненты без состояния рендерятся на сервере и могут индексироваться поисковыми роботами. А с состоянием - на стороне клиента, и роботы их не видят.
Однако в компоненте самой страницы ArticlePage у меня в любом случае будет использование useState. Значит ли это, что вся страница будет отрисовываться на клиенте? И что поисковые роботы обойдут контент страницы стороной?
P.S. Вопрос, возможно, глупый, но я правда не понимаю...
Дополнительно:
Не знаю как 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); } }); |
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 версии каждой страницы.
они дохрена намудрили и всё запутали
- да там чёрт ногу сломит, кароч там как плюсы есть так и минусы, лучше и не разбираться в этом, вообще жалею время которое потерял на изучение next, next это mvp , это не готовый продукт к употреблению, он ещё не готов, как бы они там не ласкали его
yarlavanda - забей болт причём огромный на этот ssr
По Web Core Vitals и другим критериям клиентские и серверные части написанные с использованием JavaScript, в ближайшем будущем будут нерно курить в сторонке...
И конечно же на данный момент в Blazor нет такого количества библиотек или пакетов как для React...
Чтобы написать фронт, надо знать c#, который и на сервере далеко не самый популярный яп, да и вакансий как то на blazor маловато, ну как мало - их нет (в рамках погрешности).
в ближайшем будущем будут нерно курить в сторонке...
Конечно будут, как курит php, java и python.
Ответы:
Если я правильно понимаю работу Next.js: компоненты без состояния рендерятся на сервере и могут индексироваться поисковыми роботами
Верно, индексация стандартная.
А с состоянием - на стороне клиента, и роботы их не видят.
Не совсем. Поисковики индексируют динамику, но ограниченно, и она проиграет классической статике или ssr. То, что Вы видите динамику в топе - это не заслуга динамики, а недоработка конкурентов со статикой.
Однако в компоненте самой страницы ArticlePage у меня в любом случае будет использование useState. Значит ли это, что вся страница будет отрисовываться на клиенте?
Не совсем. Часть страницы будет отрисована на сервере, а часть на клиенте.
И что поисковые роботы обойдут контент страницы стороной?
Нет, контент в любом случае будет ранжироваться, но не лучше классической статики при прочих равных.
P.S. Вопрос, возможно, глупый, но я правда не понимаю...
К нексту у многих имеются вопросы, поэтому Вы не первый и уж тем более, не последний :)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
SSR (Server-Side Rendering) компоненты – это особые компоненты веб-приложения, которые выполняются на сервере и генерируют HTML код, который затем отправляется на клиентский браузер для отображения. Это позволяет улучшить производительность веб-приложения, так как страница отображается быстрее и поисковые системы могут лучше индексировать контент.
Для того чтобы понять как работают SSR компоненты, давайте рассмотрим пример на языке программирования PHP:
// Пример SSR компонента на PHP function renderComponent() { $data = fetchDataFromDatabase(); // Получаем данные из базы данных ob_start(); // Включаем буферизацию вывода ?> <div> <h1>Заголовок</h1> <p></p> </div> <?php $html = ob_get_clean(); // Получаем содержимое буфера и очищаем его return $html; }
В данном примере функция `renderComponent` получает данные из базы данных, затем генерирует HTML код с этими данными. При запросе страницы, сервер вызывает эту функцию и возвращает сгенерированный HTML код клиенту.
Преимущества SSR компонентов:
1. Улучшенная производительность: так как HTML код формируется на сервере, страница отображается быстрее.
2. Лучшая индексация поисковыми системами: поисковые роботы могут лучше понимать контент страницы.
3. Улучшенная безопасность: данные обрабатываются на сервере, что снижает риски утечки информации.
Недостатки SSR компонентов:
1. Сложность разработки: требуется настройка сервера для работы с SSR компонентами.
2. Ограничения на использование JavaScript: так как компоненты работают на сервере, некоторые возможности JavaScript могут быть ограничены.
В целом, SSR компоненты являются полезным инструментом для улучшения производительности и SEO веб-приложений. Однако, необходимо учитывать их особенности и ограничения при проектировании и разработке веб-приложений.