Fetching and Caching data in Next.js Async Server Components

Published: 17 February 2023
on channel: Supabase
14,779
335

🚀 UPDATED VERSION:    • Cookie-based Auth and the Next.js App...   🚀

Next.js now supports Async Server Components in the brand new `/app` directory! In this video, Jon Meyers demonstrates how to suspend the rendering of a server component, while fetching data, and only render something once there is something to render.

😵‍💫 No more loading spinners! 😵‍💫

Additionally, he shows how to implement the three most common caching strategies:
1. Static Site Generation (SSG or getStaticProps)
2. Incremental Static Regeneration (ISR or the revalidate prop)
3. Server-Side Rendering (SSR or getServerSideProps)

00:00 Introduction
00:41 Creating a Supabase project
01:12 Creating a Next.js app
02:12 Building a schema with the Table Editor
04:00 Installing supabase-js
05:24 Async data fetching
06:53 RLS policy to enable read access
08:57 Caching at build-time
12:24 Building static pages with generateStaticParams
14:58 Caching data every 60 seconds
17:30 Making dynamic requests by disabling cache
18:37 Outro

👮‍♀️ Common RLS policies:    • Implement Authorization using Row Lev...   👮‍♀️

🚀 Automatically revalidate data on demand:    • Automatically rebuild stale SSG pages...   🚀

👇 Learn more about Supabase 👇

🕸 Website: https://supabase.com/
🏁 Get started: https://app.supabase.com/
📄 Docs: https://supabase.com/docs
🐙 Github: https://github.com/supabase
💬 Discord: https://discord.supabase.com/
🐦 Twitter:   / supabase  


Watch video Fetching and Caching data in Next.js Async Server Components online without registration, duration hours minute second in high quality. This video was added by user Supabase 17 February 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 14,779 once and liked it 335 people.