Как избавиться от дублей запросов к серверу на react + php и server-side rendering?

Question

[ArrayPop]

Допустим я делаю infinite-load для товаров на react. При перезагрузке страницы подгружается с помощью server-side rendering 16 товаров. Потом уже прогрузится react компонент который тоже подтягивает с сервера данные. Получается что контент был сгенерирован сервером и вытащил из базы данных товары,потом react компонент подгрузился,также обратился к серверу и получил те же товары. Как сделать так что бы react вел себя так как будто он добавил эти товары которые сгенерированы сервером,и не нужно было 2 раза вытягивать одну и ту же инфу?

Answer 1

[twoone]

Для это необходимо сетевую логику вынести на отдельный слой с которым и будут работать реакт-компоненты. Простыми словами, определение загрузки должно выполняться не в комопнентах, а в отдельных сервисах. На сервере эти сервисы всегда выполняют запросы, а на клиенте только в случаях, если данные уже не были в них кешированы. То есть, на сервере вы сделали запрос и эти данные вместе с первоначальным рендереом отправили на клиент. Клиент эти данные использует при инициализации тех же сервисов и проэтому они запросы не делают. Нужно лишь подловить момент и не забыть удалить эти данные.