9 - Streaming

README.md

@@ -38,7 +38,7 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 6. [Setting Up Your Database ♻️][2-6]  
 7. [Fetching Data ♻️][2-7]  
 8. [Static and Dynamic Rendering ♻️][2-8]
-9. Streaming 🚧 
+9. [Streaming ♻️][2-9]
 10. Partial Prerendering ️🚧 
 11. Adding Search and Pagination 🚧 
 12. Mutating Data 🚧 
@@ -57,4 +57,5 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 [2-5]: https://github.com/treejamie/next-js-learn/pull/12
 [2-6]: https://github.com/treejamie/next-js-learn/pull/13
 [2-7]: https://github.com/treejamie/next-js-learn/pull/15
-[2-8]: https://github.com/treejamie/next-js-learn/pull/16
+[2-8]: https://github.com/treejamie/next-js-learn/pull/16
+[2-9]: https://github.com/treejamie/next-js-learn/pull/17

app-router/nextjs-dashboard/app/lib/data.ts

@@ -16,8 +16,11 @@ export async function fetchRevenue() {
     // this is where chapter 8 inserted a delay.
     // it was to labour the point that with dynamic rendering
     // you can only be as fast as your slowest fetch.
+    console.log('Fetching revenue data...');
+    await new Promise((resolve) => setTimeout(resolve, 1000)) // changed to one second
 
     // get the data and return it
+    console.log('Data fetch completed after 1 seconds.');
     const data = await sql<Revenue[]>`SELECT * FROM revenue`;
     return data;
   } catch (error) {

app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx

@@ -1,22 +1,17 @@
 import { generateYAxis } from '@/app/lib/utils';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
-import { Revenue } from '@/app/lib/definitions';
+import { fetchRevenue } from '@/app/lib/data';
 
 // This component is representational only.
 // For data visualization UI, check out:
 // https://www.tremor.so/
 // https://www.chartjs.org/
 // https://airbnb.io/visx/
 
-export default async function RevenueChart({
-  revenue,
-}: {
-  revenue: Revenue[];
-}) {
+export default async function RevenueChart() { // Make component async, remove the props
+  const revenue = await fetchRevenue(); // Fetch data inside the component
   const chartHeight = 350;
-  // NOTE: Uncomment this code in Chapter 7
-
   const { yAxisLabels, topLabel } = generateYAxis(revenue);
 
   if (!revenue || revenue.length === 0) {