Next.js Patterns: Public Pages

Description

How to build public pages in Next.js that combine prerendered content (static) with dynamic, user-specific data. We'll build a product list page that uses the "use cache" directive to prerender components that fetch external async data, and the React Suspense to stream dynamic content without blocking the prerendered components. - Demo: https://cache-components-public-pages.labs.vercel.dev/ - Code: https://github.com/vercel-labs/cache-components-public-pages - Step-by-step guide: https://nextjs.org/docs/app/guides/public-static-pages - "use cache" docs: https://nextjs.org/docs/app/api-reference/directives/use-cache - Suspense docs: https://react.dev/reference/react/Suspense Chapters: 00:00 Introduction 00:42 What we're building 01:27 Step 1: Add a simple header 01:54 Static components 02:19 Step 2: Add the product list 02:37 Dynamic components 03:36 Cache components 04:11 Step 3: Add a dynamic promotion banner 04:40 Partial Prerendering 05:57 Summary