NextJS: 02-04 SSG, SSR, CSR and ISR 🤣

preview_player
Показать описание
Cùng mình tìm hiểu xem những thuật ngữ này có ý nghĩa gì nhé: SSG, SSR, CSR and ISR 😆

1. Pre-rendering là gì?
2. SSG - Static Site Generation
3. SSR - Server Side Rendering
4. CSR - Client Side Rendering
5. ISR - Incremental Static Regeneration

———
#nextjs
#ssg
#isr
———
VIDEO CHAPTERS:
Made by: Hoang Pham
Cảm ơn bạn nhiều nhé! ❤️

0:00 Giới thiệu
1:01 SSR React Hydrate
2:19 Hydrate function
4:08 Pre-rendering
10:28 Static Site Generation - SSG & Server Site Rendering - SSR
13:59 Client Site Rendering - CSR
15:22 Incremental Static Regeneration - ISR
18:27 Pre-rendering form is per-page basis
———
Easy Frontend - Code xịn hơn mỗi ngày
———
💰 Ủng hộ mình làm videos thì đóng góp qua MoMo/ZaloPay: 0901 309 729 nhé
———
Kết nối với mình:
  1. Easy Frontend
  2. typescript
  3. typescript tutorial
  4. typescript cơ bản
  5. nextjs
  6. next js
Рекомендации по теме
NextJS: 02-04 SSG, 0:22:20

NextJS: 02-04 SSG, SSR, CSR and ISR 🤣

NextJS Rendering Methods 0:06:57

NextJS Rendering Methods - Explained (CSR vs SSR vs SSG vs ISR)

What is CSR 0:16:57

What is CSR SSR SSG and ISR

Next.js 13 SSG, 0:22:01

Next.js 13 SSG, SSR & ISR | Nextjs 13 tutorial

WTF Do These 0:13:44

WTF Do These Even Mean

SSG vs SSR 0:08:52

SSG vs SSR Explained in 10 Minutes (For Beginners)

CSR / SSR 1:02:41

CSR / SSR / SSG / ISR with Next.js – Explained!

NextJS 13. Варианты 0:26:31

NextJS 13. Варианты рендеринга - RSC, CSR, SSR, SSG, ISR

Next.js walkthrough - 1:24:31

Next.js walkthrough - 2 | Caching | force-cache | no-store | ISG revalidate | metadata #nextjs15

Next.js 15 Tutorial 0:04:55

Next.js 15 Tutorial - 49 - Server-side Rendering (SSR)

Next JS | 0:14:29

Next JS | Page Rendering | SSR | SSG | ISR | CSR | Data fetching

CSR, SSR, and 0:25:13

CSR, SSR, and SSG on NextJS

Next.js SSR vs. 0:12:10

Next.js SSR vs. SSG vs. ISR vs. CSR | Next.js Data Fetching

CSR, SSR, SSG, 0:20:16

CSR, SSR, SSG, ISR, and OMG. WTF? BBQ! - Ahmad Awais

How to Render 0:02:35

How to Render Pages in Next.js: SSR, SSG, CSR, ISR, etc... || Nextjs Rendering technique || Class 11

Next.js Server-Side Rendering 0:04:07

Next.js Server-Side Rendering - All You Need to Know in 4 Minutes

⚛️ React SSR 0:01:00

⚛️ React SSR vs server components

What the heck 0:20:45

What the heck is CSR, SSR, & SSG in Next.js

What are Server 0:04:55

What are Server Side Rendering (SSR) & Client Side Rendering (CSR) | Pros + Cons

React Server Components 0:05:36

React Server Components vs SSR

SSG vs SSR 0:00:58

SSG vs SSR #shorts

Por que o 0:11:51

Por que o Next.js é tão bom! - CSR, SSR e SSG

Konsep SSR, CSR, 0:14:30

Konsep SSR, CSR, SSG, ISR - Implementasi di Next.js (pemula/lanjutan)

NEXTJS INTRODUCTION (CSR 0:04:56

NEXTJS INTRODUCTION (CSR VS SSR VS SSG VS ISR)

Комментарии
Автор

Hay nha! Nextjs 13 đã gộp SSG và ISR vào SSR, nên hiện tại chỉ còn 2 khái niệm là Client Component và Server Component.
Client Component thì vẫn render phía client, còn Server Component được chia thành Dynamic Rendering và Static Rendering.
Dynamic Rendering thì sẽ render lúc request time, trong khi Static Rendering sẽ render vào build time (SSG) hoặc phụ thuộc vào Data Revalidation (ISR).
Ngoài ra còn có thêm Streaming giúp Dynamic Rendering render dần dần từng phần thay vì đợi server render toàn bộ page mới trả về html như trước.

ki-sgig
Автор

Những concept này em đã từng nghe qua rất nhiều lần, em cảm thấy nó khá lằng nhằng và dễ bị confuse, nhưng mà cách diễn đạt trong video của anh rất trực quan, rõ ràng dễ hiểu. Rất ủng hộ series này nha!

atthanh
Автор

Cảm ơn bạn. Tôi cũng đã tìm hiểu nhiều nhưng phải đến video của bạn tôi mới hiểu được các kiểu rendering này.

dangquyet
Автор

Kiến thức này thật sự bổ ích, mặc dù chẳng mong là đi phỏng vấn sẽ được hỏi và trả lời được bla bla, nhưng nâng tầm được kiến thức làm bản thân cảm thấy đam mê JS hơn. Cám ơn anh Hậu nhiều ^^ Hóng video tiếp theo của anh

danhpham
Автор

hay quá, cực kỳ chi tiết và tâm huyết. Cảm ơn anh nhiều về những kiến thức bổ ích em chúc anh luôn khỏe mạnh và bình an

NamHuynh-dobd
Автор

0:00 Giới thiệu
1:01 SSR React Hydrate
2:19 Hydrate function
4:08 Pre-rendering
10:28 Static Site Generation - SSG & Server Site Rendering - SSR
13:59 Client Site Rendering - CSR
15:22 Incremental Static Regeneration - ISR
18:27 Pre-rendering form is per-page basis

hoangpham
Автор

quá hay ạ, lần đầu thấy kiểu giảng bài mà hợp gu em đến v

TuiTenBo-xwqy
Автор

Bài này rất dễ hiểu ạ, đúng là bài em mong đợi nhất từ đầu khoá đến giờ 😁

maicaotri
Автор

Quá tuyệt vời luôn ạ <3 em mong những video chuyên sâu về những concept này từ anh :D

namnhan
Автор

Bài này coi quá phê anh ơi, cám ơn anh nhiều!!!! <3

holyland
Автор

I'm a new "fan cứng" :>. Em chào anh Hậu :)

thuonglc
Автор

vừa hiến máu xg :v hy vong anh ra nhiều clip để tụi em còn nghịch cho tay to

ThuanTran
Автор

dạ em muốn được học hết khoá học NextJS mà em muốn đăng ký hội viện để dc học NEXTJS thì ngoài visa vs master card thì còn cách khác ko ạ. Mong anh trả lời cách giúp em Join hội viên với ạ

nguyenthanhnam
Автор

để coi hết series này mình cần tham gia member à anh, em muốn tham gia nhưng kh có thẻ visa thì làm sao anh nhỉ

teenii
Автор

A Hậu có dự định làm video về react-query ko ạ

thienvu
Автор

anh Hậu ơi, những kiến thức chia sẻ của anh về khóa học Nextjs rất chi tiết. E xin phép được lấy bài giảng của anh sharing cho ae đồng nghiệp trong công ty được ko a. Em đã join member trên Youtube rồi ạ

khoa-tran
Автор

A ơi, a có thể share các file pdf bài giảng cho e xin với được không ạ?

khamluong
Автор

A Hậu cho mình hỏi chút. SSG có good for SEO như SSR không? tại chưa thấy A đề cập đến :)

vntripfinder
Автор

anh ơi a hướng dẫn redux và typescript với nextjs đi a

huynguyendang
Автор

Hi a. Làm sao đăng kí được fan cứng ạ?

dungtranvan