diff --git a/.changeset/silver-actors-care.md b/.changeset/silver-actors-care.md
new file mode 100644
index 0000000000..5391a1d57b
--- /dev/null
+++ b/.changeset/silver-actors-care.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fixed an issue where `<CatalogFilterLayout.Filters />` would re-render its children on page load for smaller screens, potentially leading to unnecessary additional backend requests.
diff --git a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
index ee51020cbb..793d4741ad 100644
--- a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
+++ b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
@@ -34,8 +34,10 @@ export const Filters = (props: {
     drawerAnchor?: 'left' | 'right' | 'top' | 'bottom';
   };
 }) => {
-  const isScreenSmallerThanBreakpoint = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),
+  const isScreenSmallerThanBreakpoint = useMediaQuery(
+    (theme: Theme) =>
+      theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),
+    { noSsr: true },
   );
   const theme = useTheme();
   const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);