|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/nextjs-supabase-web-tailwindcss/
课程评论：没有评论
**课程名称：Next.js 与 Supabase 高性能 Web 开发** 本课程通过两个项目，深入讲解如何利用 Next.js 和 Supabase 构建高性能的 Web 应用程序。 **项目一：Todo 应用 (SSG + CSF 实现动态数据更新)** * **重点学习：** * SSG (Static Site Generation) 与 CSF (Client-Side Fetching) 结合实现动态数据更新。 * Web Vitals (TTFB, FCP, LCP) 的概念，以及它们与 SSG, SSR, SSG+CSF 之间的关系和性能对比。 * **技术栈：** Next.js, Supabase, React-query (服务器数据管理/缓存), Zustand (客户端状态管理), TypeScript, Tailwind CSS。 **项目二：Note 应用 (利用 On-demand ISR 实现高速分发 + 准动态数据更新)** * **重点学习：** * On-demand ISR (Incremental Static Regeneration) 的应用，实现内容快速分发和适度动态更新。 * 通过 API 路由和 Supabase Functions Hooks 实现 On-demand ISR。 * **技术栈：** 与项目一相同。 **核心学习主题：** * **Supabase：** 表创建、RLS (Row Level Security)、数据关系、级联删除等使用方法。 * **Next.js 与 Supabase 集成：** 认证、CRUD 操作。 * **状态管理：** 使用 React-query 和 Zustand 进行高效的状态管理。 * **Web Vitals 深入理解：** TTFB, FCP, LCP 的含义及对用户体验的影响。 * **Next.js 页面类型：** 理解 SSG, SSR, SSG+CSF 的差异及其与 Web Vitals 的关联和测量。 * **ISR 的优化：** 理解 ISR 的潜在问题，并实现 On-demand ISR 解决方案。 * **Next.js 链接预取：** 理解 `next/link` 的预取行为，并根据不同遷移模式进行分析。 * **静态分发：** 理解首次访问的延迟行为。 * **Edge CDN (X-Vercel-Cache)：** 理解 Edge CDN 的工作原理，以及 ISR 更新时 Edge Network 的交互。 * **Vercel Serverless Function 区域影响：** 分析不同部署区域对 SSR 响应速度 (TTFB, LCP) 的影响。 * **Vercel Edge Network 与 Middleware：** 简单的 A/B 测试 Demo。 * **API 响应速度对比：** Next.js 12.2+ 的 Edge API Routes (ε) 与 API Routes (λ) 的响应速度差异。
本コースでは、NextjsとSupabaseを連携したWebアプリケーションの開発について2つのプロジェクトを通して学習します。プロジェクト1では、SSG(SG) + CSFによるDynamicデータ更新を重視したTodo appの実装に加えてWeb vitals(TTFB, FCP, LCP)について学習しWeb vitalsとSSG, SSR, SSG + CSFとの関係性の理解及びそれらの比較計測を行います。プロジェクト2では、On-demand ISRを活用した高速配信+準Dynamicデータ更新を実現するNote appを実装します。Project 1: Todo App (SSG+CSF(Client side fetch)によるDynamicデータ更新)Project 2: Note App (on-demand ISRを活用した高速配信+準Dynamicデータ更新)本コースで使用するTech stackNextjsSupabaseReact-query: サーバーデータ管理(cache)Zustand: クライアント状態管理TypescriptTailwind CSS本コースの学習テーマSupabaseの使い方 (Table作成, RLS, リレーション, CASCADE Deleteなど)NextjsとSupabaseの連携 (認証, CRUD) React-queryとZustandによる状態管理Web vitals (TTFB, FCP, LCP)の理解SSG(SG), SSR, SSG+CSFとWeb vitalsの関係性と測定Nextjsの全Page種類を理解ISRの問題点理解とOn-demand ISR実装 (api/route, Supabase Function Hooks)next/link prefetch挙動の理解 (遷移先パターン別)静的配信初回アクセス遅延挙動の理解 Edge CDN (X-Vercel-Cache)ISR更新時のEdge Networkの理解Vercel serverless function regionの違いによるSSRレスポンスへの影響(TTFB, LCP)Vercel Edge NetworkMiddlewareの簡単なdemo (A/B test): Nextjs 12.2〜Edge API routes (ε) と API routes (λ) の応答速度の違い: Nextjs 12.2〜
