Serverside Rendering (SSR) Rules in Next.js

Complete Next.js Developer: Zero to Mastery

Section 1 - Introduction

Complete Next.js Developer: Zero to Mastery (2:32)
Next.js Course Outline (5:30)
The Two Paths: App Router vs. Pages Router (11:03)
Which Path To Take? (5:07)
Exercise: Meet Your Classmates and Instructor
Course Resources
ZTM Plugin + Understanding Your Video Player
Set Your Learning Streak Goal

Section 2 - Next.js Fundamentals (including React)

Section Overview (2:07)
What is Next.js? (1:52)
Optional: Learn React Fundamentals
Benefits of Next.js and Different Rendering Techniques (4:38)
Performance with Next.js (6:26)
Image Component in Next.js (4:13)
File Based Routing and SEO (6:11)
Serverless Functions in Next.js (4:35)
Next.js vs Create React App (6:11)
Let's Have Some Fun (+ Free Resources)

Section 3 - App Router - Project #1: Build Your First Next App

Project Overview: What Are We Building? (5:32)
Create Next.js App Zero Config (8:57)
Editor Setup VS Code (7:25)
Next.js Setup Project Walkthrough - Part 1 (9:31)
Next.js Setup Project Walkthrough - Part 2 (7:13)
What Is Tailwind CSS? (8:26)
Let's Get Ready for the Home Page! (4:16)
App Background (5:35)
Next.js Fonts Walkthrough (4:14)
Next.js Google Fonts (6:10)
Using Multiple Fonts (4:45)
Using Local Fonts (5:40)
Metadata API (4:10)
Unlimited Updates

Section 4 - App Router - Server Components and Client Components

What Are Server Components? (8:11)
Why Do We Need Server Components? (3:00)
When to Use Server vs. Client Components (3:38)
Walkthrough of the Blog App Architecture (1:43)
Code Walkthrough of the Blog App (4:18)
Exercise: Server Components (4:24)
Solution: Server Components (3:38)
Exercise: Moving Client Components Down the Tree (7:06)
Solution: Moving Client Components Down the Tree (1:55)
Let’s Add Our Client Component Banner! (5:06)
Course Check-In

Section 5 - App Router - Routing with Next.js

Introduction to Routing (7:06)
Routing Terminology (3:03)
Dynamic Routing (3:55)
Dynamic Routing Example (2:21)
Catch All Routes (3:20)
Differences between Catch All and Dynamic Routes (2:39)
Exercise: Routing (1:17)
Link Component (2:36)
Nested Routes Link (3:08)
Dynamic Pages with Link Component (2:13)
Exercise: Link Component Routing (0:59)
Implement a New Life System

Section 6 - App Router - SEO Hydration-Different Rendering Techniques

What is SEO? (9:37)
Client Rendering vs. Server Rendering (6:22)
Pre-Rendering Hydration (4:09)
Different Rendering Techniques (4:22)
Static Site Generation (SSG) (5:38)
Server-Side Rendering (SSR) (3:10)
Incremental Site Regeneration (ISR) (4:25)
Client-Side Rendering (CSR) (4:01)
Code Walkthrough (3:29)
Data Caching (3:57)
Fetch API Twist in Next.js (4:31)
Implement SSG (4:33)
Implement ISR (3:44)
Implement SSR (3:04)

Section 7 - App Router - Static Coffee Stores

Project Architecture (5:46)
Card Server or Client Component? (2:07)
Build Card Component (6:21)
Add Coffee Stores on Page (6:00)
Image Component Blur (3:30)
Mapbox API Setup (4:19)
Environment Variables (2:49)
generateStaticParams API (1:43)
generateStaticParams (3:53)
Mapbox Library (5:51)
Transform Coffee Data (8:13)
Data Fetching Walkthrough with Fetch (2:18)
Unique ID (1:28)
Transform Coffee Store Data (4:45)
Unique ID (1:27)
Coffee Store Page Styling (3:43)
Generate Static Params (3:29)
Important Note: Unsplash API Account
Setup Unsplash (3:10)
Setup Unsplash API (2:43)
Exercise: Implement Unplash API

Section 8 - App Router - Dynamic Coffee Stores by Location

Geolocation API (3:50)
Server or Client Component Dilemma (1:52)
Refactor Components (2:20)
Implement Handle Track Location (5:28)
Server Cannot Be Child Component (3:20)
Loading in Geolocation (3:42)
Find Lat Long (2:57)
Error Handling (3:27)
Stores Near Me (8:15)
What Are Route Handlers? (4:58)
Implement Route Handler (6:36)
Call Route Handler (4:38)
Dynamic Route Handler (3:25)

Section 9 - App Router - Server Actions and Serverless Functions

Walkthrough of the Coffee Store Page (4:35)
Best Spot to Invoke Store (1:26)
Setup Airtable (6:08)
Airtable API (2:56)
Architecture Airtable (2:03)
Find Record by ID (7:22)
Refactor Code (5:15)
Create Coffee Store (8:31)
Upvote Design (3:12)
Voting Count (3:05)
Server Actions (3:20)
Server Actions Walkthrough (6:14)
Routing Server Actions (1:35)
Exercise: Server Actions (1:27)
Solution: Server Actions (4:11)
Create Server Action in Content Security Policy (CSP) (2:29)
Update Coffee Store (5:18)
Pass ID (2:30)
UseFormState (5:03)
Loading States Server Action (7:02)
Error Page (8:30)
Loading Coffee Store Page (4:52)
Metadata (11:36)

Section 10 - App Router - Deployment and Built Optimization

npm run build (2:30)
Github Deployment (4:15)
Prod Test (2:13)
Lighthouse Test (3:47)
Image Lighthouse (4:44)
Lighthouse Accessibility Score (1:55)
Aspect Ratio Image Lighthouse (2:26)
Lighthouse Image Run Test (4:59)
Exercise: Imposter Syndrome (2:55)

Section 11 - Pages Router - Project Setup | Netflix with Next.js

Project Overview (5:54)
Github Projects and Resources
Setting Up Our Master Project (2:02)
Setup Fonts (3:48)
Add Font to _Document (5:02)
Global App Styling (7:56)

Section 12 - Pages Router - Netflix Home Page and Video

Netflix Component Architecture (4:27)
Banner Component (3:49)
Banner Component Structure (9:35)
Banner Component Button With Font (8:25)
Icons with Google Fonts (4:02)
NavBar Component Structure (7:27)
NavBar Component Styling (8:54)
NavBar Router (8:54)
NavBar Dropdown (4:56)
NavBar Logo Icons (7:02)
Card Component Architecture (2:19)
Card Component Structure (6:09)
Card Component Size (8:34)
Card Component Error Handling (9:32)
Card Component Image Error (4:00)
Framer Motion with Card (4:15)
Implement Framer Motion with Card (8:35)
Section Cards Architecture (1:17)
Section Cards Structure (6:43)
Section Cards Styling (5:15)
Card Scaling Feature (8:13)
Refactor Section Cards Component (8:04)
Youtube API Overview (2:25)
Which Youtube API To Use? (6:35)
Implement Youtube Search API (6:26)
Implement Youtube Search API (continued) (4:59)
Data Fetching Technique: Server Side Rendering (6:17)
Serverside Rendering (SSR) Rules in Next.js (2:48)
Implement Serverside Rendering (SSR) to Fetch Videos (6:34)
Youtube API: Google Console Project (7:04)
Invoke Youtube API (7:30)
Exercise: Youtube API Query
Solution: Youtube API Query
Implement More Sections For Videos (5:44)
Error Handling for Video Library (6:29)
Popular Videos API Docs (8:46)
Implement Popular Videos (6:17)

Section 13 - Pages Router - Authentication with Magic | Netflix with Next.js

Section Overview (2:28)
What is Passwordless Authentication? (4:58)
Overview of Sign-in Page (3:43)
Setup of Sign-in Page (5:39)
Quick Note: EsLint Error
Sign-in Header Component (3:55)
Sign-in Page Structure (5:58)
Sign-in Page Styling (7:13)
Sign-in Form Validation (9:23)
Sign-in Routing To Dashboard (7:18)
What is Magic Links? (8:57)
Setup Magic Account (6:55)
Install Magic in App (3:45)
Magic API Keys (6:35)
Magic SDK (continued) (2:57)
Magic Docs For Login (4:33)
Magic Implementation (8:12)
Magic SDK Storage and Routing (4:30)
Magic Loading State (5:58)
Routing Delay with Login (6:53)
Quick Note: Next.js Warning: useEffect with async
Username on NavBar (9:17)
SignOut a User (8:45)
App Route once LoggedIn (7:12)
Routing Flicker with Login (6:14)
Loading Component (4:22)

Section 14 - Pages Router - Incremental Static Regeneration | Netflix with Next.js

Project Architecture (3:49)
What Are We Building and Video Id Page Route (4:25)
Create Dynamic Route: Video Id Page (3:37)
Link Dynamic Page to Card Component Routing (4:25)
Connect Link Component (2:53)
Exercise: Link Component
Solution: Link Component
Connect Banner Component (3:54)
React Modal Docs (2:56)
Install React Modal Component (8:33)
Quick Note: Modal onRequestClose stopped working after applying styling
Modal Component Styles (1:44)
Implement Youtube API Player & Docs (8:32)
Youtube Player Styling (4:17)
Modal Component Structure (9:21)
Modal Styling (3:13)
Which Data Fetching Techniques To Use? (7:43)
What is Incremental Static Regeneration? (7:05)
Incremental Static Regeneration Fallback (4:27)
ISR (Incremental Static Regeneration) Demo and Next Steps (3:18)
Incremental Static Regeneration (ISR) Docs (4:49)
Implement Incremental Static Regeneration (ISR) (7:25)
Incremental Static Regeneration with Youtube API Docs (5:19)
Architectural Diagram (1:16)
Youtube API by ID (10:24)
Fix Link Component Route (2:24)
ISR Query Params (5:41)
Navbar Component (4:39)
YouTube Quota Limit: Test Data (8:50)

Section 15 - Pages Router - Hasura GraphQL | Netflix with Next.js

Section Overview (4:15)
Why GraphQL? (7:33)
What is GraphQL? (6:53)
GraphQL Example (4:57)
GQL Query vs Mutation (5:45)
What is Hasura? (5:49)
Hasura API Explorer (7:32)
Hasura Dashboard and Signup (3:12)
Hasura Setup DB (2:23)
Hasura Create PostGres DB (4:10)
Hasura DB Architecture (7:22)
Hasura DB Architecture (continued) (6:23)
Setup DB (6:37)
Hasura Try Out Tables (5:09)
Query Live Hasura Server (6:40)
Query Live Hasura Server with Environment Variables (5:45)
Hasura User Roles (7:35)
User Roles: Why JWT (JSON Web Tokens) (5:17)
What is JWT (JSON Web Token) (6:52)
JWT (JSON Web Token) Secret (6:39)
Create JWT Secret and Update Roles (7:24)

Section 16 - Pages Router - Authentication with Hasura | Netflix with Next.js

Section Overview (2:28)
Authentication Architecture (5:32)
Quick Note: How to use Postman?
Login API (5:18)
Login API Architecture (6:07)
Login API Create Auth Header (5:02)
Login API Magic Server Side SDK (6:24)
Login API Magic Server Side SDK Testing (5:47)
Login API JWT (JSON Web Token) Docs (4:37)
Important Note: Users array is Empty and JWT content in HASURA
Login API Create JWT (JSON Web Token) (8:14)
Login API Hasura Check New User (5:38)
Login API Check New User Query (9:36)
Login API Refactor (7:23)
Login API New User Hasura Dashboard (4:07)
Login API Create New User Mutation (10:31)
Login API Overview and Cookie (5:27)
Login API Set Token Cookie (8:02)
Login API Set Token Cookie Testing (4:02)
Login API Cleanup (2:13)
Invoke Login API on Login (9:15)

Section 17 - Pages Router - Ratings Service and My List Page | Netflix with Next.js

Section Overview (1:53)
App Architecture (5:20)
Like and Dislike Button Functionality (9:36)
Like and Dislike Button Styling (2:04)
Like and Dislike Button States (8:46)
Stats Rating API Architecture (4:35)
Stats API Creation (3:55)
Build Stats with Request Cookies (9:25)
Stats API Overview with JWT Verification (4:00)
Stats API JWT Verification (3:10)
Stats API Design GraphQL (4:20)
Troubleshooting: Don't See Users or Stats Table Info?
Stats API Design Find User By ID (3:42)
Find User By Id GraphQL (9:34)
Use Query String For Video ID (3:15)
Conditional Logic Does Video Exist? (3:36)
GraphiQL: Insert and Update Mutation (8:23)
Stats API Use Insert and Update Mutation (10:47)
Stats API Testing (4:39)
Insert And Update Mutation Implementation (7:08)
Stats API Wrap (9:14)
Overview of Like Dislike Functionality (1:09)
Like Dislike Functionality (10:07)
Like Dislike Functionality Testing (3:25)
Stats API Design: GET Request (3:26)
Tweak Stats API GET Request (5:04)
Stats API Refactor (6:17)
Invoke Stats API on Frontend (9:14)
Watch It Again Architecture (4:46)
Watch it Again Query Hasura (6:49)
Watch it Again Call in SSR (ServerSide Rendering) (6:09)
Render Watch it Again Section on Page (6:46)
High Resolution Images in the App (5:14)
Cookies inside SSR (ServerSide Rendering) (5:34)
Redirects in SSR (ServerSide Rendering) (9:23)
Create Redirect User Hook (4:23)
Testing the Redirect User Hook (5:35)
My List Page Architecture (2:39)
Build My List Page (6:11)
Styling My List Page (2:39)
Hasura Query for My List Page (4:56)
Server Side Render My List Page (7:12)
Wrap Cards in My List Page (8:46)
Logout Assignment (6:00)
Logout Solution
Exercise: SSR Redirects
Solution: SSR Redirects

Section 18 - NextJS: The New Features

Middleware Introduction (6:17)
Important Note: Creating Middleware
Important Note: Middleware Updates
Middleware - Let's Try it Out (6:08)
Middleware Implementation Continued (9:17)
Important Note: > Next.js Cookies

Section 19 - Pages Router - Deployment | Netflix with Next.js

How To Make Cloud Ready App (5:48)
Create Github Repo (6:55)
Application Cleanup (3:25)
Deployment To Vercel (7:34)
Try The App On Vercel (8:07)
Application Testing on Vercel (3:37)
Run Production Next Build (6:37)

Where To Go From Here?

Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements

Appendix: Learning React

React Fundamentals Lessons
Next Steps

Serverside Rendering (SSR) Rules in Next.js

This lecture is available exclusively for ZTM Academy members.

If you're already a member, you'll need to login.

Join ZTM To Unlock All Lectures