small fix to curriculum

Author: bradwestfall

app-react-router-framework/LESSONS/03-performance/lecture/NOTES.md

@@ -6,6 +6,7 @@ MUST READ: https://remix.run/docs/en/main/guides/single-fetch
 
 ## Caching
 
+https://reactrouter.com/how-to/headers#from-loaders-and-actions
 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
 https://gist.github.com/kentcdodds/0c6f183531beeafe771eb48a3586707b
 
@@ -20,8 +21,8 @@ export async function loader() {
   })
 }
 
-export const headers = () => {
-  // Page Caching
-  return { 'Cache-Control': `public, max-age=${ONE_HOUR}, s-maxage=${ONE_HOUR}` }
+// REQUIRED to be here if we're doing loader or action caching
+export function headers({ loaderHeaders }: HeadersArgs) {
+  return loaderHeaders
 }
 ```

app-react-router-framework/LESSONS/03-performance/lecture/routes/home.tsx

@@ -41,7 +41,7 @@ export default function Index({ loaderData: { products } }: Route.ComponentProps
                   {/* prefetch="intent" */}
                   {/* prefetch="viewport" */}
                   {/* prefetch="render" */}
-                  <Link prefetch="intent" to={product.id.toString()} className="button">
+                  <Link prefetch="none" to={product.id.toString()} className="button">
                     View
                   </Link>
                 </div>

app-react-router-framework/LESSONS/03-performance/lecture/routes/product-profile.tsx

@@ -1,14 +1,17 @@
-import { Await } from 'react-router'
+import { data, Await, type LoaderFunctionArgs } from 'react-router'
 import { getBrands, getCategories, getProduct, getRelatedProducts } from '~/utils/db.server'
 import { sleep, sortLabel } from '~/utils/helpers'
 import { ProductProfile } from '~/components/ProductProfile'
 import { Tiles } from '~/components/Tiles'
 import { Suspense } from 'react'
 import { BrowseProductItem } from '~/components/BrowseProducts'
 import { useCart } from '~/state/CartContext'
-import type { LoaderFunctionArgs } from 'react-router'
 import type { Route } from './+types/product-profile'
 
+import type { HeadersArgs } from 'react-router'
+
+const CACHE_TIME = 1000 + 10 // 10 seconds
+
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   const productId = parseInt(params.productId!)
   if (!productId) throw new Response('Invalid Product ID', { status: 404 })
@@ -20,21 +23,54 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
   ])
 
   if (!product) throw new Response('Not found', { status: 404 })
-
-  // NOTICE: This is an unresolved promise. The lack of await means that
-  // `relatedProductsPromise` is a promise variable being returned from
-  // the loader to the client
   const limit = 3
   const relatedProductsPromise = getRelatedProducts(product.brand, limit, [productId]).then(sleep())
 
-  return {
-    product,
-    brands: brands.sort(sortLabel),
-    categories: categories.sort(sortLabel),
-    relatedProductsPromise,
-  }
+  return data(
+    {
+      product,
+      brands: brands.sort(sortLabel),
+      categories: categories.sort(sortLabel),
+      relatedProductsPromise,
+    },
+    {
+      headers: {
+        'Cache-Control': `public, max-age=${CACHE_TIME}, s-maxage=${CACHE_TIME}`,
+      },
+    }
+  )
+}
+
+export function headers({ loaderHeaders }: HeadersArgs) {
+  return loaderHeaders
 }
 
+// export const loader = async ({ params }: LoaderFunctionArgs) => {
+//   const productId = parseInt(params.productId!)
+//   if (!productId) throw new Response('Invalid Product ID', { status: 404 })
+
+//   const [product, brands, categories] = await Promise.all([
+//     getProduct(productId),
+//     getBrands(),
+//     getCategories(),
+//   ])
+
+//   if (!product) throw new Response('Not found', { status: 404 })
+
+//   // NOTICE: This is an unresolved promise. The lack of await means that
+//   // `relatedProductsPromise` is a promise variable being returned from
+//   // the loader to the client
+//   const limit = 3
+//   const relatedProductsPromise = getRelatedProducts(product.brand, limit, [productId]).then(sleep())
+
+//   return {
+//     product,
+//     brands: brands.sort(sortLabel),
+//     categories: categories.sort(sortLabel),
+//     relatedProductsPromise,
+//   }
+// }
+
 export default function Page({ loaderData }: Route.ComponentProps) {
   const { product, brands, categories, relatedProductsPromise } = loaderData