Как организовать SSR в React.js для отдельных компонентов на странице?
Всем привет!
Изучаю React, решил переписать фильтр товаров в интернет магазине написанном на Laravel, отказавшись от jQuery, так как количество фильтров и значений очень большое, значения в фильтр подгружаются при помощи поиска и после десятка фильтраций, страница начинает откровенно говоря подтормаживать, так как много что перерисовывается в процессе.
Подключил React к проекту, написал два компонента (один для фильтра, а второй для вывода отфильтрованных товаров в списке товаров, соответственно вызывается два ReactDOM.render), управляю все это дело при помощи redux. Все замечательно работает, отклик на странице мгновенный, но становится открытым вопрос - поскольку это ИМ, важно, чтобы товары в категориях индексировались.
Стал изучать тему SSR, нашел пару статей (с использованием express), но они строятся на примере с SPA, что не подходит, так как там берется индексный файл и в него подставляется результат выполнения приложения. В моем же случае React и SSR нужен только для двух компонентов на странице категории, а сами страницы уже рендерятся на сервере (используется шаблонизатор Blade).
Начал искать информацию, как это можно реализовать, но почему-то ничего не нахожу. Неужели никто React не использует так, как захотел использовать его я? Либо есть какие-то варианты организовать рендер этих блоков на стороне сервера? Мне в голову приходит только один вариант: выводить товары на страницу сразу в шаблоне, а затем уже при загрузке страницы будет срабатывать React и перерисовывать этот блок с товарами при фильтрации. Но я не уверен, что так правильно и так можно делать, ведь получается, что у меня будет два шаблона товара - один в шаблоне на сервере, а второй шаблон в jsx.
Подскажите, как правильно это реализовать, либо поделитесь статьями на эту тему, заранее благодарю.
По поводу отдельных SSR страниц не могу подсказать, но для создания SSR есть 2 основных фреймворка - Next и Gatsby. Первый более популярный. Next используют часто крупные игроки, например tiktok
Простой
