Доступность JavaScript фреймворков в SEO

Многие современные сайты собирают на JavaScript-фреймворках: React, Vue, Angular и других.

Такие фреймворки часто рисуют содержимое страницы уже в браузере с помощью JavaScript. Сервер сначала отдает почти пустой HTML, а текст и заголовки появляются только после загрузки скриптов.

Типичная страница на React выглядит так:

<!DOCTYPE html>
<html>
	<head>
		<title>Shop</title>
	</head>
	<body>
		<div id="root"></div>
		<script src="/app.js"></script>
	</body>
</html>

В исходном коде нет текста каталога, описания товара и ссылок. Все это создает JavaScript уже после загрузки страницы.

Если сайт сделан только так, поисковый робот может не увидеть основной контент. Поэтому обычный сайт на React без дополнительных настроек часто плохо индексируется или не индексируется вовсе.

Чтобы контент был доступен роботу, нужен серверный рендеринг, или SSR. В этом случае сервер сразу отдает готовый HTML с текстом, заголовками и ссылками:

<!DOCTYPE html>
<html>
	<head>
		<title>Shop</title>
	</head>
	<body>
		<h1>Каталог товаров</h1>
		<p>Всего товаров: 128</p>
		<a href="/catalog/phones/">Смартфоны</a>
	</body>
</html>

Для популярных фреймворков уже есть готовые решения с SSR:

React - Next.js;
Vue - Nuxt;
Angular - Angular Universal.

Если проект собран на React, Vue или Angular, разработчику важно не ограничиваться только клиентским рендерингом. Для SEO-страниц нужно, чтобы важный контент был в HTML сразу, а не появлялся только после выполнения JavaScript.

Объясните, почему сайт на React без SSR может не индексироваться.

Дана верстка страницы на React:

<div id="root"></div>
<script src="/app.js"></script>

Объясните, почему робот может не увидеть содержимое страницы.

Для сайта на Vue нужна индексация каталога товаров. Назовите решение, которое поможет отдавать контент роботу сразу в HTML.