19. Tạo Http client với fetch để gọi API cho Next.js

Рет қаралды 8,532

Күн бұрын

Пікірлер: 46

@duocdev 9 ай бұрын

Với Next.js thì không nên dùng Axios nếu mọi người muốn tận dụng hết sức mạnh của Next.js. Thay vào đó hãy dùng fetch, Vì những lý do sau đây 1. fetch được next.js thêm những tính năng đặc biệt như caching và một số options khác. Điều này không có ở các lib gọi api như axios 2. fetch chạy ở client và server đều tương đồng về mặt API, nhưng Axios thì khác, ở client axios dùng XHRRequest, còn server thì http 3. Axios làm gia tăng bundle size P/s: Tất nhiên nếu mọi người không quan tâm các yếu tố trên thì dùng axios vẫn được :D 🎥 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

@hoaimiqng 8 ай бұрын

❤

@duynd243 7 ай бұрын

Nhưng giờ thì khác rồi anh @duocdev kzbin.info/www/bejne/d3yxeWqjjcice68

@SertanejoHitsEClassicos 8 ай бұрын

Lại 1 video đúng vấn đề e đang cần rất hay và có ích cảm ơn anh

@thientran3731 3 ай бұрын

Nếu phía Backend không cho phép CORS, phía Frontend cần setup proxy như nào a nhỉ.Cảm ơn a!

@HuyTran.DevBackEnd 4 ай бұрын

46:12 / 1:08:21 nhìn cách anh code mà e thấy xấu hổ quá, e toàn code sao cho chạy là được, từ giờ e sẽ sửa lại để code clear giống anh hơn =((((

@giabaooan8044 2 ай бұрын

anh ơi cho em hỏi một ý là việc anh tạo ra một class là SessionToken thì em thắc mắc là việc tạo ra class với các thuộc tính với phương thức nó có giống với việc tạo ra một store để lưu trữ và được các component truy xuất tới không anh, Em cảm ơn

@duocdev 2 ай бұрын

Về lý thuyết là gần giống. Nó đều là object đc lưu trên ram của client. Như khác tí là store thì truy cập trong component thôi chứ cái object anh tạo thì truy cập mọi nơi

@leevu12 7 ай бұрын

Anh Được cho em hỏi là ở phút 28:00, hàm onSubmit em không sử dụng async await mà em dùng then catch promise và sử dụng router.push('/me') trong then thì nó không hoạt đông. Nguyên nhân do đâu thế ạ, mong anh giải thích

@duocdev 7 ай бұрын

Chắc nó chạy vào then chưa 😂

@DuongHoang-ty5rq 9 ай бұрын

hay qua anh oi

@kk7697 9 ай бұрын

Cảm ơn anh rất nhiều vì đã chia sẻ những kiến thức bổ ít. Và anh ơi cho em hỏi thêm là thay vì dùng fetch thì em có thể dùng axios để thay thế được không? Em đang băn khoăn trường hợp khi fetching data trên server thì fetch cho phép mình caching & revalidating, nếu dùng axios thì có nên hay không

@duocdev 9 ай бұрын

Không nên dùng axios vì em sẽ mất đi các tính năng như caching của fetch bên nextjs nhé. Nếu em không cần mấy cái đó thì cứ dùng cũng đc

@HieuTran-ej4yn 4 ай бұрын

dùng axios sẽ ko tối ưu seo vì ko có cơ chế catching nên mỗi lần vào đều phải fetch lại api gây chậm lag

@minhson00948 9 ай бұрын

Mình chưa hiểu cái đoạn call api AuthapiRequest.auth sao nó chạy vào đc api/auth/routerlink.ts mong bạn giải thích rõ hơn đoạn đấy không

@duocdev 9 ай бұрын

Này gọi là Route Handler của Nextjs giúp bạn tạo ra các api y hệt dùng expressjs. Bạn cứ search từ khoá đó là rõ

@ArtLifeDev 7 ай бұрын

Trong khóa này có dùng Server Actions and Mutations không ạ

@duocdev 7 ай бұрын

Khóa free này không hướng dẫn Server Actions and Mutations em nhé. Cái này sẽ có ở khóa có phí

@nguyenkhoa1613 8 ай бұрын

Cảm ơn a vì đã chia sẻ! E vẫn không hiểu lắm đoạn setToken tại sao lại ko đc set ở server side set value(token: string) { // Nếu gọi method này ở server thì sẽ bị lỗi if (typeof window === 'undefined') { throw new Error('Cannot set token on server side') } this.token = token } E có test bằng 2 tab ẩn danh và tab thường và bỏ if (typeof window === 'undefined') thì việc setToken ở server nó đâu có override SessionToken đâu a nhỉ. A có cách nào test được override thì chỉ e với ạ

@duocdev 8 ай бұрын

em chỉ có 1 môi trường server nhưng có rất rất nhiều môi trường client (nhiều máy truy cập đến server). Vậy nên nếu em dùng chung 1 biến sessionToken ở server để lưu trữ sessionToken thì sẽ dẫn đến sessionToken người sau đè lên người trước và dẫn đến lỗi. Đây gọi là overwrite Việc em test không bị lỗi là do anh code anh tránh được trường hợp đó bằng cách anh truyền session token từ cookie vào mỗi lần request ở server component. Em muốn test được trường hợp lỗi thì em phải dùng cái sessionToken được set một cách tự động vào header Authorization như anh đang làm ở client thì mới thấy lỗi. p/s: Overwrite ở đây là nó xuất hiện trên server chứ không phải là server overwrite client

@hoaimiqng 8 ай бұрын

Overide ở server á bạn, để giải quyết việc này ngta thường dùng redis,...Còn ở đây anh làm ở client

@pinku3694 3 ай бұрын

Em đã xem đên 5,6 lần rồi mà vẫn k hiểu hết được

@phantrungkien3049 9 ай бұрын

cái authPath e muốn thêm trang home với router là "/" thì nó báo This page isn’t working a ạ

@duocdev 9 ай бұрын

Không phải cứ thích thêm là thêm. Kiểm tra page có tồn tại hay chưa hoặc kiểm tra logic check bên middleware đoạn if (authPaths.some((path) => pathname.startsWith(path)) && sessionToken) { return NextResponse.redirect(new URL('/me', request.url)) } Thì cái path nó bị lọt vào dẫn đến loop vô hạn. Good luck

@thandanmai6730 9 ай бұрын

em chưa hiểu ở khúc anh call api authApiRequest.auth sao mà nó chạy vào dc func POST ở file app/api/auth/route.ts, mong anh giải thich giúp em. tks anh

@duocdev 9 ай бұрын

Cái thư mục /api được định nghĩa là Router Handler, nghĩa là chúng ta có thể tạo server API trong đó. em search "router handler Next.js" sẽ rõ hơn nhé

@B8Official 8 ай бұрын

Bên trong hàm request mình có thể gọi cookie để lấy ra sessionToken đúng không anh nhỉ tránh trường hợp cứ phải truyền vào từ bên ngoài hơi mất công

@duocdev 8 ай бұрын

Phải truyền từ ngoài vào em nhé. cookie không dùng được trong cái file http này mà chỉ dùng trong Server Component hoặc Route Handler thôi.

@hoaimiqng 8 ай бұрын

Anh có giải thích trong video đó bẹn

@luongtran8166 7 ай бұрын

trường hợp mình sử dụng HTTP Only thì phần headers phía client mình chỉ cần set thêm withCredentials là được rồi phải không ạ

@duocdev 7 ай бұрын

chính xác luôn em nhé

@luongtran8166 7 ай бұрын

Như vậy thì thằng client mình đâu cần phải set cookie cho nó đâu, tại mình sử dụng HTTP Only, đúng không a @@duocdev

@duocdev 7 ай бұрын

@@luongtran8166 vẫn cần phải set cookie cho domain của nextjs nhé. Để cho next server có cookie mà dùng

@ChinhTran-tq7qd 7 ай бұрын

@@duocdev Anh cho em hỏi, trường hợp mình login vào rồi và gọi API /api/auth (để truyền token lên cho nextServer) thì lúc này routeHandler sẽ nhận được token này và trả về response-header cho next-client đúng không ạ. Và nếu như thế thì lần sau nếu API được call ở phía nextServer thì cookie này lấy đâu ra anh nhỉ, vì chỉ khi nào nextClient gửi request lên nextServer thì lúc này nextServer mới lấy được cookie này chứ nếu mà mình fetch API trực tiếp từ nextServer tới BE server thì em vẫn chưa hình dung ra là lấy cookie ở đâu ra ạ. mOng anh giải đáp dùm ẹm ạ.

@ntaanh2084 4 ай бұрын

@@ChinhTran-tq7qd +1

@honglinhvu1204 6 ай бұрын

E thấy nếu dùng được axios thì vẫn linh hoạt hơn fetch

@duocdev 6 ай бұрын

quen thì cứ dùng đi em, nhưng em sẽ bị miss tính năng của next.js

@anhht2001 6 ай бұрын

@@duocdev miss tính năng là như nào anh nhỉ anh có thể nói rõ hơn được không ạ ?

@duocdev 6 ай бұрын

@@anhht2001 cache fetch api em nhé

@anhnguyenhoai9003 4 ай бұрын

request nó có mỗi url, method, headers, body thôi mà bạn hơi phức tạp hóa vấn đề

@congnamle3632 4 ай бұрын

Người ta config quen tay dạng dự án lớn, có thể có nhiều config phức tạp m còn bạn làm petproject chơi thẳng trong component thì ai nói. Hãy mở tư duy ra xem nó có gì hay chứ

@news_airdrop999 2 ай бұрын

ko thích thì có thể next video được mà :D mỗi người 1 cách làm, đâu phải ai cũng thích kiểu này ai cũng thích kiểu kia riêng tôi hiện tại thấy kiểu như video ok, rút gọn code quá đẹp