The refetch operation calls the same server actions that were used for the initial data load. My challenge lies in caching these server-side actions. I'm not sure where to begin here in the past i just use SWR lib on client

The refetch operation calls the same server actions that were used for the initial data load

const ChannelTableClient = ({
  data: initData,
}: {
  data: ChannelDataReturn[];
}) => {
  const [filter, setFilter] = useState<filterType>("7D");
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [data, setData] = useState<ChannelDataReturn[]>(initData);
  const company = useCompany();
  const rowsPerPage = 10;

  const fetchChannelData = useCallback(
    async (newFilter: filterType) => {
      setLoading(true);
      try {
        const response = await channelData({
          companyId: company?.companyId,
          dateConfig: newFilter,
        });
        setData(response);
      } catch (error) {
        console.error("Failed to fetch channel data:", error);
      } finally {
        setLoading(false);
      }
    },
    [company?.companyId]
  );

  useEffect(() => {
    if (filter !== "7D") {
      fetchChannelData(filter);
    } else {
      setData(initData);
    }
  }, [filter, fetchChannelData, initData]);

  const handleFilterChange = (newValue: string) => {
    if (newValue === "1D" || newValue === "7D" || newValue === "30D") {
      setFilter(newValue as filterType);
    }
  };