Is it a antipattern to fetch data from a server action for example to populate a select in a dialog, but only at the time the dialog is opened, so not via RSC. I could encapsulate it inside another RSC but there are conditional inputs that also require api data in the browser so what is the best way to handle that?

import { getListOfShops } from "../lib/actions";
// getListOfShops is a server action
const PublishDialog = () => {
  const [isOpen, setIsOpen] = useState(false);

  const [data, setData] = useState<unknown>(null);

  useEffect(() => {
    if (!isOpen) return;

    const fetchData = async () => {
      const shops = await getListOfShops();

      setData(shops);
    };

    fetchData().catch(console.error);
  }, [isOpen]);

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>

this snippet is just as a demonstration