fix: unintentional static rendering & amount calculation

[JurekMueller]

While following the app router tutorial, I stumbled upon two issues related to data fetching that are addressed in this pull request:

1. In the tutorial, the components of the dashboard overview page (cards, latest invoices, and revenue chart) are described as being dynamically rendered because they involve data fetching. However, the corresponding actions use PostgreSQL, which is not automatically recognized by Next as an indicator to render dynamically. This could only be achieved using the fetch method.
   The components are thus cached and rendered statically in production. This might not be immediately obvious to most users because during local development, all pages are rendered dynamically by default. It only becomes noticeable in the production deployment. To opt into dynamic rendering, I added await connection() to the respective components.
2. The invoice amount is stored as amount in cents to avoid floating-point operations. However, to fully achieve this, a Math.round() was missing.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
next-learn-starter	Ready	Preview	Comment	Sep 18, 2025 2:00pm
next-seo-starter	Ready	Preview	Comment	Sep 18, 2025 2:00pm

[vercel]

@JurekMueller is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

Additional Comments:

dashboard/final-example/app/ui/invoices/table.tsx (line 14):

The InvoicesTable component fetches PostgreSQL data with fetchFilteredInvoices but is missing the await connection() call that was added to other data-fetching UI components for dynamic rendering.

View Details

📝 Patch Details

diff --git a/dashboard/final-example/app/ui/invoices/table.tsx b/dashboard/final-example/app/ui/invoices/table.tsx
index 0255185..ab8cb50 100644
--- a/dashboard/final-example/app/ui/invoices/table.tsx
+++ b/dashboard/final-example/app/ui/invoices/table.tsx
@@ -3,6 +3,7 @@ import { UpdateInvoice, DeleteInvoice } from '@/app/ui/invoices/buttons';
 import InvoiceStatus from '@/app/ui/invoices/status';
 import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
 import { fetchFilteredInvoices } from '@/app/lib/data';
+import { connection } from 'next/server';
 
 export default async function InvoicesTable({
   query,
@@ -11,6 +12,7 @@ export default async function InvoicesTable({
   query: string;
   currentPage: number;
 }) {
+  await connection();
   const invoices = await fetchFilteredInvoices(query, currentPage);
 
   return (

Analysis

InvoicesTable component missing await connection() for dynamic rendering consistency

What fails: InvoicesTable component at dashboard/final-example/app/ui/invoices/table.tsx lacks await connection() call while other PostgreSQL data-fetching components (CardWrapper, LatestInvoices, RevenueChart) include it

How to reproduce:

# Compare the pattern across components:
grep -A 5 "await connection()" dashboard/final-example/app/ui/dashboard/*.tsx
# Shows CardWrapper, LatestInvoices, RevenueChart all call await connection()

grep -A 5 "await fetch" dashboard/final-example/app/ui/invoices/table.tsx  
# Shows InvoicesTable calls await fetchFilteredInvoices() without await connection()

Result: Inconsistent rendering behavior - invoices table may be statically cached while other dashboard components are dynamically rendered

Expected: All PostgreSQL data-fetching components should have consistent await connection() calls as documented in Next.js connection() API to ensure dynamic rendering

[JurekMueller]

Additional Comments:

dashboard/final-example/app/ui/invoices/table.tsx (line 14):

The InvoicesTable component fetches PostgreSQL data with fetchFilteredInvoices but is missing the await connection() call that was added to other data-fetching UI components for dynamic rendering.
View Details

To clarify: On the invoice table this is not needed because it lives on the invoices page which uses the searchParam prop which is one of the triggers for Next to render the full page dynamically.