NetScript vs frontend frameworks

// app/products/[product]/data.ts
import { cache } from 'react';
export const getProduct = cache((id: string) =>
  fetch(`${API}/products/${id}`, { next: { revalidate: 30 } }).then(r => r.json())
);

// app/products/[product]/page.tsx
export const generateMetadata = async ({ params }: PageProps<'/products/[product]'>) => {
  const { product } = await params;
  const item = await getProduct(product);
  return { title: item.name, description: item.summary };
};
const Page = ({ overview, stock }: {
  overview: React.ReactNode; stock: React.ReactNode;
}) => <ProductLayout overview={overview} stock={stock} />;
export default Page;

// app/products/[product]/@overview/page.tsx
const OverviewSlot = async ({ params }: PageProps<'/products/[product]'>) => {
  const { product } = await params;
  return <Overview product={await getProduct(product)} reviews={await loadReviews(product)} />;
};
export default OverviewSlot;

// app/products/[product]/@stock/page.tsx
const StockSlot = async ({ params }: PageProps<'/products/[product]'>) => {
  const { product } = await params;
  return <Stock product={await getProduct(product)} stock={await loadStock(product)} />;
};
export default StockSlot;

// @overview/loading.tsx and @stock/loading.tsx export the skeletons.
// Each slot adds error.tsx when its failure must stay local.

<!-- app/pages/products/[product].vue -->
<script setup lang='ts'>
const route = useRoute();
const key = `product:${route.params.product}`;
const { data: product, refresh } = await useAsyncData(
  key,
  () => $fetch(`/api/products/${route.params.product}`),
);
const { data: reviews, status: reviewsStatus } = useLazyAsyncData(
  `${key}:reviews`,
  () => $fetch(`/api/products/${route.params.product}/reviews`),
);
const { data: stock, status: stockStatus } = useLazyAsyncData(
  `${key}:stock`,
  () => $fetch(`/api/products/${route.params.product}/stock`),
);
useSeoMeta({
  title: () => product.value?.name,
  description: () => product.value?.summary,
});
let timer: ReturnType<typeof setInterval>;
onMounted(() => { timer = setInterval(refresh, 30_000); });
onUnmounted(() => clearInterval(timer));
</script>

<template>
  <ProductLayout>
    <OverviewSkeleton v-if='reviewsStatus === `pending`' />
    <Overview v-else :product :reviews />
    <StockSkeleton v-if='stockStatus === `pending`' />
    <Stock v-else :product :stock />
  </ProductLayout>
</template>

// routes/products/[product]/+page.server.ts
export const load = async ({ params, depends }) => {
  depends(`product:${params.product}`);
  const product = await getProduct(params.product);
  return {
    product,
    reviews: loadReviews(params.product),
    stock: loadStock(params.product),
  };
};

<!-- routes/products/[product]/+page.svelte -->
<script lang='ts'>
  import { invalidate } from '$app/navigation';
  import { onMount } from 'svelte';
  let { data } = $props();
  onMount(() => {
    const timer = setInterval(() => invalidate(`product:${data.product.id}`), 30_000);
    return () => clearInterval(timer);
  });
</script>

<svelte:head><title>{data.product.name}</title></svelte:head>
<ProductLayout>
  {#await data.reviews}<OverviewSkeleton />{:then reviews}<Overview product={data.product} {reviews} />{/await}
  {#await data.stock}<StockSkeleton />{:then stock}<Stock product={data.product} {stock} />{/await}
</ProductLayout>

import { Await, createFileRoute } from '@tanstack/react-router';
import { queryOptions } from '@tanstack/react-query';

const productOptions = (id: string) => queryOptions({
  queryKey: ['product', id],
  queryFn: () => getProduct(id),
  staleTime: 30_000,
});

export const Route = createFileRoute('/products/$product')({
  loader: async ({ params, context }) => {
    const product = await context.queryClient.ensureQueryData(
      productOptions(params.product),
    );
    return {
      product,
      reviews: loadReviews(params.product),
      stock: loadStock(params.product),
    };
  },
  head: ({ loaderData }) => ({
    meta: [{ title: loaderData?.product.name }],
  }),
  component: ProductPage,
});

const ProductPage = () => {
  const { product, reviews, stock } = Route.useLoaderData();
  return <ProductLayout>
    <Await promise={reviews} fallback={<OverviewSkeleton />}>
      {(value) => <Overview product={product} reviews={value} />}
    </Await>
    <Await promise={stock} fallback={<StockSkeleton />}>
      {(value) => <Stock product={product} stock={value} />}
    </Await>
  </ProductLayout>;
};