Поисковые фильтры на React Server Components

Наткнулся на любопытный пример, как можно реализовать фильтры результатов поиска на React Server Components. Автор - Sam Selikoff. Посмотрите, как удобно оформлена статья, с этими её интерактивными примерами)

Пример из статьи

Вот я нажимаю на фильтр по жанру кино. Например, я выбрал Crime. В этот момент пользователя перекидывает на тот же URL, на котором он был, но с добавлением параметра ?genre=Crime.

Вся эта страница является Server Component'ом (RSC). При каждом изменении URL выполняется запрос на сервер, в ответе мы получаем данные для отрисовки этого же RSC, но уже с учётом параметров из URL. Т.е. компонент получает эти параметры и на их основе фильтрует результат и рисует UI.

При этом обратить внимание стоит на то, что фильтры продолжают работать отзывчиво вне зависимости от длительности загрузки результатов. Пока идёт загрузка, я могу и дальше менять фильтры. А в ответе от сервера я получу именно тот набор фильмов, который соответствует всем выбранным мной жанрам.

Почему оно работает?

Можете почитать полный текст статьи, где автор перечисляет все испробованные им варианты. Помог ему в итоге хук useOptimistic, о котором я тоже недавно писал пост. Но в сегодняшней статье работа этого хука объясняется примерно следующим образом:

После загрузки всех необходимых данных источником правды о том, какие фильтры были выбраны, является сервер. Если мы запросили страницу по адресу ?genre=Crime, то мы и получим страницу, на которой фильтр по Crime изображён как "активный".

Но вот мы сменили фильтр и началась очередная загрузка. И во время этой загрузки источником правды является клиент.
Если мы кликаем на фильтр и отправляем запрос, интерфейс должен моментально среагировать на клик и поменять состояние фильтра. Сервер, может быть, ещё и не видел наш клик, но клиент то видел!

И вот хук useOptimistic как раз и даёт нам некое "локальное состояние", с которым мы можем работать, пока выполняется запрос. Можно даже продолжать его менять, запуская новые и новые запросы. А как только всё уляжется, это "локальное состояние" в конечном итоге подменится на те данные, которые мы получим от сервера. И снова сервер — источник правды))

Что это нам даёт

Помню, после Frontend Night была дискуссия о том, зачем вообще нужен useOptimistic. Так вот в этом случае он позволяет нам продолжить пользоваться UI, пока результаты наших действий применяются на сервере.
А использование URL-параметров позволяет не потерять выбранные нами фильтры при перезагрузке страницы. Можно отправлять ссылку с выбранными фильтрами другу))