How do i pass an app.data.jsx file data to liquid file?

[Anonymous]

This is my jsx file there i am get an data form database

import { PrismaClient } from "@prisma/client";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

const prisma = new PrismaClient();

export async function loader() {
  try {
    const categories = await prisma.Categories.findMany();
    const tabs = await prisma.TabName.findMany();
    const accordionData = await prisma.AccordiansData.findMany();

    console.log("Categories:", categories);
    console.log("Tabs:", tabs);
    console.log("Accordion Data:", accordionData);

    return json({
      success: true,
      categories,
      tabs,
      accordionData,
    });
  } catch (error) {
    console.error("Loader error:", error);
    return json(
      { success: false, error: "Failed to load data" },
      { status: 500 },
    );
  }
}

 and this is my liquid file i want an jsx file data to liquid file 

<script>
  async function fetchProxyData() {
    try {
      const response = await fetch('https://Storename.myshopify.com/app/data', {
        method: 'GET',
        headers: {
          Accept: 'application/json',
        },
      });

      if (!response.ok) {
        console.error(`HTTP Error: ${response.status} - ${response.statusText}`);
        return;
      }

      const data = await response.json();
      console.log('Response Data:', data);
    } catch (error) {
      console.error('Fetch error:', error);
    }
  }

  window.onload = fetchProxyData;
</script>

{% schema %}
{
  "name": "Custom Data Section",
  "target": "section"
}
{% endschema %}

its all my code and i want to get an data of database in liquid i know that liquid file is not run server-side so this is my approach but its give me 404 not found error how can i fix it