stealthy Comments - Answer Overflow

stealthy

Posts Comments

KPCKevin Powell - Community

•Created by stealthy on 11/29/2024 in #front-end

Next JS Caching Doubts

got it, thanks for your insights

14 replies

KPCKevin Powell - Community

•Created by stealthy on 11/29/2024 in #front-end

Next JS Caching Doubts

so in case of user specific data, force dynamic rendering would be better option?

14 replies

KPCKevin Powell - Community

•Created by stealthy on 11/29/2024 in #front-end

Next JS Caching Doubts

just following up on this.

14 replies

KPCKevin Powell - Community

•Created by stealthy on 11/29/2024 in #front-end

Next JS Caching Doubts

server action

export const getInvoices = async () => {
  const result = await db.select().from(Invoices).orderBy(Invoices.createTs);
  return result;
};

export const getInvoices = async () => {
  const result = await db.select().from(Invoices).orderBy(Invoices.createTs);
  return result;
};

14 replies

KPCKevin Powell - Community

•Created by stealthy on 11/29/2024 in #front-end

Next JS Caching Doubts

InvoiceDetails.tsx

import { getInvoices } from "@/actions/invoices";
import { InvoiceRow } from "@/components/invoice/invoice-row";
import {
  Table,
  TableBody,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
export const InvoiceDetails = async () => {
  const invoices = await getInvoices();
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Date</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Email</TableHead>
          <TableHead className="text-center">Status</TableHead>
          <TableHead className="text-right">Value</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <InvoiceRow key={invoice.invoice_id} invoice={invoice} />
        ))}
      </TableBody>
    </Table>
  );
};

import { getInvoices } from "@/actions/invoices";
import { InvoiceRow } from "@/components/invoice/invoice-row";
import {
  Table,
  TableBody,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
export const InvoiceDetails = async () => {
  const invoices = await getInvoices();
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Date</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Email</TableHead>
          <TableHead className="text-center">Status</TableHead>
          <TableHead className="text-right">Value</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <InvoiceRow key={invoice.invoice_id} invoice={invoice} />
        ))}
      </TableBody>
    </Table>
  );
};

14 replies

KPCKevin Powell - Community

•Created by stealthy on 11/29/2024 in #front-end

Next JS Caching Doubts

dashboard.tsx

import { InvoiceDetails } from "@/components/invoice/invoice-details";
import { Button } from "@/components/ui/button";
import { Loader } from "@/components/ui/loader";
import { CirclePlus } from "lucide-react";
import Link from "next/link";
import { Suspense } from "react";
const Dashboard = () => {
  return (
    <main>
      <header className="flex justify-between flex-wrap py-4">
        <h1 className="font-semibold text-2xl md:text-3xl">Invoice</h1>
        <Button variant={"ghost"} asChild>
          <Link href="/invoice/new">
            <CirclePlus className="size-4" />
            Create Invoice
          </Link>
        </Button>
      </header>
      <Suspense fallback={<Loader />}>
        <InvoiceDetails />
      </Suspense>
    </main>
  );
};
export default Dashboard;

import { InvoiceDetails } from "@/components/invoice/invoice-details";
import { Button } from "@/components/ui/button";
import { Loader } from "@/components/ui/loader";
import { CirclePlus } from "lucide-react";
import Link from "next/link";
import { Suspense } from "react";
const Dashboard = () => {
  return (
    <main>
      <header className="flex justify-between flex-wrap py-4">
        <h1 className="font-semibold text-2xl md:text-3xl">Invoice</h1>
        <Button variant={"ghost"} asChild>
          <Link href="/invoice/new">
            <CirclePlus className="size-4" />
            Create Invoice
          </Link>
        </Button>
      </header>
      <Suspense fallback={<Loader />}>
        <InvoiceDetails />
      </Suspense>
    </main>
  );
};
export default Dashboard;

14 replies

KPCKevin Powell - Community