0

Всем привет! Изучаю React, решил переписать фильтр товаров в интернет магазине написанном на Laravel, отказавшись от jQuery, так как количество фильтров и значений очень большое, значения в фильтр подгружаются при помощи поиска и после десятка фильтраций, страница начинает откровенно говоря подтормаживать, так как много что перерисовывается в процессе.

Подключил React к проекту, написал два компонента (один для фильтра, а второй для вывода отфильтрованных товаров в списке товаров, соответственно вызывается два ReactDOM.render), управляю все это дело при помощи redux. Все замечательно работает, отклик на странице мгновенный, но становится открытым вопрос - поскольку это ИМ, важно, чтобы товары в категориях индексировались.

Стал изучать тему SSR, нашел пару статей (с использованием express), но они строятся на примере с SPA, что не подходит, так как там берется индексный файл и в него подставляется результат выполнения приложения. В моем же случае React и SSR нужен только для двух компонентов на странице категории, а сами страницы уже рендерятся на сервере (используется шаблонизатор Blade).

Начал искать информацию, как это можно реализовать, но почему-то ничего не нахожу. Неужели никто React не использует так, как захотел использовать его я? Либо есть какие-то варианты организовать рендер этих блоков на стороне сервера? Мне в голову приходит только один вариант: выводить товары на страницу сразу в шаблоне, а затем уже при загрузке страницы будет срабатывать React и перерисовывать этот блок с товарами при фильтрации. Но я не уверен, что так правильно и так можно делать, ведь получается, что у меня будет два шаблона товара - один в шаблоне на сервере, а второй шаблон в jsx.

Подскажите, как правильно это реализовать, либо поделитесь статьями на эту тему, заранее благодарю.

2 ответа 2

0

Посмотрите в сторону Next.js. Фреймворк предназначен для решения проблемы React.js, связанную с отрисовкой приложения на стороне сервера - SSR.

0

Для работы с SSR есть кстати-говоря не мало библиотек, но наибольшую популярность занимает именно Next.js для react с ее дополнениями. Там своя специфика, въехать будет немного сложно да и при написании проекта, если на next его перекидывать, придется перелопатить весь проект, так, что со стеком лучше определятся сразу.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.