11. Mọi thứ cần biết về Client Component Next.js
ฝัง
- เผยแพร่เมื่อ 8 ก.พ. 2025
- Video này mình sẽ làm rõ với mọi người về Client Component, cách nó hoạt động như thế nào và cách mà Next.js tối ưu client component bằng cách static rendering như thế nào!
🎥 Mình đã có khóa Next.js Super trả phí: duthanhduoc.co...
📕 Đây là link github khóa học Next.js Free, các bạn không cần phải submit email nữa: github.com/dut...
Tặng các bạn Voucher giảm giá 100k khi mua khóa học tại edu.duthanhduoc.com: TH-cam
✉️Các bạn có thể tìm mình qua các kênh sau:
✅ Page Được Dev: / duocdevofficial
✅ Facebook cá nhân: / duthanhduoc
✅ Website: duthanhduoc.com/
✅ Email: duthanhduoc@gmail.com
✅ SĐT: 0768 447 467
🔥Hiện tại mình có các khóa học về React.js, Node.js, Next.js, các bạn có thể vào website edu.duthanhduo... để mua
#duocdev #duthanhduoc #nextjs #reactjs #shadcn #tailwindcss
![[ CI/CD ] GITLAB RUNNER TRIỂN KHAI VỚI DOCKER - CI/CD](/img/n.gif)
🎥 Mình đã có khóa Next.js Super trả phí: duthanhduoc.com/courses/nextjs-super
📕 Đây là link github khóa học Next.js Free, các bạn không cần phải submit email nữa: github.com/duthanhduoc/nextjs-free
Bài này quá hay anh ơi, kiến thức quá chuẩn. +1 respect.
À giải thích cho bạn nào thắc mắc sao code frontend mà vẫn có client và server nhé. Theo mình hiểu, server chính là nơi chứa mã nguồn của trang web (cụ thể là chứa các file html, js, css, ... của các bạn) còn client chính là cái trình duyệt mà user dùng (có thể là điện thoại, máy tính của họ).
Bản chất là khi user vào trang web thì trình duyệt sẽ tải các file html, js, css từ nơi lưu trữ (server) xuống rồi render ra giao diện.
thế cái server chứa các câu lệnh db cũng như xử lý req nó cũng là server nhưng nó khác gì với server bạn nói vậy
Về bản chất thì mình thấy nó giống nhau thôi bạn, chẳng qua này là về system design, người ta muốn chia ra thành 1 server frontend (chứa các mã nguồn chuyên xử lý về giao diện) và 1 server backend xử lý logic.
Bạn hoàn toàn có thể gộp chúng lại thành 1, điển hình là mô hình MVC.
Hay bạn cũng có thể code giao hiện ở server backend rồi trả về html, css như thường. và ngược lại. Nhưng làm như vậy sẽ khiến source code bị rối và khó maintan và mở rộng
@ à nghĩa là có 2 cách 1 là backend viết giao diện r trả về luôn như dùng hbs. 2 là viết giao diện ở next rồi gọi tới server logic
@@vanbui-ci5gv đúng rồi nhé bạn, trong thực thế không chỉ có 2 loại này, còn có thể scale lên thành 3,4,... nhiều server khác, mỗi server sẽ có nhiệm vụ riêng của nó, các server sẽ giao tiếp với nhau qua api,...
mong anh ra them nhieu video hay
Okie em, mấy hôm nay hơi bận nên ra ít. Mai cố gắng quay nhiều hơn :v
Cái đoạn mà trình duyệt render client component 1 lần nữa gọi là quá trình hydrate đúng k a
@@Lucky5-12 đúng r em
Hay quá anh ơi 🥰
Hay quá anh ơi, khóa học anh quá tuyệt vời
khi nào nên dùng client cpn và server cpn vậy anh
Dùng server component khi có thể, nó sẽ giúp giảm js bundle xuống client, cũng như tốt cho seo. Còn dùng client component khi component yêu càu tương tác như event handler, các hook như useEffect, usestate…
Ngoài ra nếu page không public ra ngoài, không yêu cầu seo như page quản lý thì dùng client component cũng k sao
bài này hay anh ơi :v ra nhiều video hơn anh nhé
Rất hay anh nhé! Lúc đọc docs còn mù mờ thì xem vid a hiểu rõ luôn. Cảm ơn anh rất nhiều
Bạn cho mình xin thông tin extension, khi build thì sẽ hiển thị trên browser mà bạn có đề cập trong video với nhé
Có mỗi react dev tool thôi bạn
đoạn cuối anh config thì điều anh muốn làm ở đây là gì v anh em chưa hiểu lắm mong a giải đáp tks a. (logging : fetch)
Khi ở chế độ dev, các em gọi fetch api thì nó sẽ log ra terminal cho em biết cái nào cache, cái nào không cache
chi tiết
nextjs.org/docs/app/api-reference/next-config-js/logging
anh ơi sự khác nhau của file .ts và .tsx là gì ạ, em viết .ts thay cho .tsx được không anh
Được. Nhưng đôi khi các editor như vs code sẽ không highlight code đúng. Vậy nên tốt nhất nếu em đang dùng cú pháp jsx trong file thì nên đặt là .tsx, không thì cứ .ts
anh ơi cho e hỏi
Cient component: phía server trả về html rỗng,… vậy thì server “ở đây” là gì ạ
và phần Server component nữa ạ, cái render phía server, là mình có cần config gì không hay server nó tự trả về cho mình ạ?
Server ở đây là server được nextjs tạo ra dựa trên nodejs nhé. Server component thì em cứ xem các video tiếp đi rồi sẽ hiểu
anh cho em hỏi cái sever mà mình nhắc tới ở đây là cái sever của phần UI khác hoàn toàn với sever ở phần back-end (cái kết nối với database) phải không ạ
Đúng rồi em nhé. Giống như em code react thì em cũng phải cần 1 cái server backend kết nối db để trả data về render lên UI vậy đó