NextJS: 01-02 Khi nào nên dùng ReactJS hay NextJS? 🙃

[@EasyFrontend]

Khi nào dùng ReactJS Khi nào dùng NextJS Bạn đã rõ sau video này chưa? 😊

[@jackdo1012]

0:00 Giới thiệu video 0:37 NextJS là gì? 2:49 Điểm mạnh của NextJS 5:53 Khi nào nên dùng NextJS hay ReactJS

[@EasyFrontend]

Yeah cảm ơn em nhiều nhiều nhé Jack Do ơi Số lượng video đã contribute chapter: 11 🎉

[@GTAONLINEVIETNAM]

12:30 phần này e dùng nextjs để là 1 dasboard cho khách hàng sử dụng luôn thì như thế nào ạ

[@namseven5004]

Hay quá anh ơi, em cũng đang thắc mắc về nextjs mà chưa có dịp tìm hiểu. Hên có anh ra video này em coi hiểu luôn 😊

[@EasyFrontend]

yeah ngon lành Nam ơi, nhớ follow series nha hihi mỗi tuần có 3-5 videos mới à mà nhớ đk fan cứng để đc xem sớm nhất nhen Nam 😍

[@hoanghuy3797]

9:55 như anh nói cái trang landing pages quảng cáo cho sản phẩm đó thì cần dùng nextjs, còn khi người dùng đăng nhập vào trang dashboard và sử dụng sản phẩm thì không cần SEO và có thể sử dụng CRA. Nhưng như vậy thì mình dùng 2 cái trên cùng một project á anh, hơi lấn cấn nhỉ? và trong thực tế những trang ng ta không dùng nextjs thì ng ta có dùng CRA trong những sản phẩm thực tế không ạ hay chỉ dùng để học thôi?

[@EasyFrontend]

hi Hoàng, câu hỏi rất hay em nha Anh có một số ý chia sẻ với em - Trong thực tế mình dùng cả CRA và NextJS - CRA: dùng cho private projects (cần login) như trang dashboard admin của user hoặc cho nhân viên cty sử dụng. Vì nó đơn giản, chỉ cần static server là host đc, ko cần phải dùng tới node server, tiết kiệm chi phí. Dĩ nhiên bạn hoàn toàn có thể dùng NextJS để làm dự án này cũng đc, tuy nhiên nên cân nhắc chi phí. - NextJS: thường dùng cho những dự án cần SEO như landing page, blog, feed, ... Những trang này thường yêu cầu giao diện đẹp, cầu kì. Đặc trưng của 2 nhóm dự án này khá khác nhau, bên thì rất chú trọng giao diện, còn bên dashboard thì miễn tiện lợi dùng là được, ko cần quá cầu kì cho rối. Thường trong thực tế anh sẽ tách thành nhiều projects khác nhau để dễ xử lý. Những phần giống nhau thì anh tái sử dụng bằng copy/paste hoặc tách thành npm package tùy trường hợp.

[@hoanghuy3797]

@@EasyFrontend cảm ơn anh ạ

[@khoahocnhanh]

Dạ anh Hậu, em đang học Reactjs, vậy thì có cần học sâu Reactjs k ạ, hay chuyển sang học luôn Nextjs vậy anh

[@EasyFrontend]

vẫn nên em nhen, vì NextJS cũng là React Framework nên việc hiểu sâu React sẽ giúp em dễ tiếp thu phần NextJS hơn, đặc biệt là khúc server side rendering, cơ mà a nghĩ react cơ bản là em học next đc òi, còn đào sâu thì ngâm cứu dần cũng đc em nha 😊

[@hungphamvan594]

so với web mvc truyền thống thì hiệu quả trong việc seo của nextjs có tốt hơn không ạ

[@EasyFrontend]

hi Hưng, SEO thì anh nghĩ kĩ thuật chỉ một phần, còn lại độ hiệu quả là do kĩ thuật marketing của mình em nhen 😊

[@h_sangg9459]

Anh ơi cái tag tím đỏ xanh trên gg của a là gì thế

[@EasyFrontend]

à nó để gom nhóm mấy cái tab lại á em hehe blog.google/products/chrome/manage-tabs-with-google-chrome/

[@h_sangg9459]

@@EasyFrontend cảm ơn anh, quá xịn

[@zanhbenz]

Anh/Em có cách nào chuyển đổi nhanh từ 1 project to tổ bố viết ReactJS thuần. Sang đẩy lên NextJS khó trần ai luôn

[@EasyFrontend]

hi em, a hk nghĩ là có cách nào đó nhanh liền được Em phải tự setup lại hết á Sau đó move từng module một qua em nha, chứ đừng chơi all in một lần, dễ nản lắm

[@nguyenduyanh6381]

Nghe đồn có cái fan cứng sẽ được anh rep cmt :)))

[@EasyFrontend]

hahaa 🤣

[@hung4699]

cho em xin tên extension hiển thị tab trên trình duyệt như a với ạ 😊

[@EasyFrontend]

hi em, cái đó nó là Chrome Tab Group nhen, nó là một feature có sẵn của chrome, em ko cần cài thêm extension gì hết nhen hehee, em search thêm từ khóa đó là ra liền hehe

[@hung4699]

@@EasyFrontend thanks anh ạ

[@NgonTinhChill]

Cho em hỏi react-helmet có giải quyết hết các vấn đề về các thể metal seo cho ReactJS hay không ? Nếu giải quyết hết thì ta cần gì sử dụng NextJS !

[@EasyFrontend]

hi em, a nghĩ câu hỏi của em trong đó có câu trả lời luôn rồi nè 😉 Em check lại thử react-helmet là gì nhé và nó có giúp em xử lý đc SEO ko nha 😊

[@hoangtri9569]

A Hậu ơi, e dùng nextjs vô cái dự án dashboard dù không khuyến khích nhưng mà vẫn được anh nhỉ?

[@EasyFrontend]

yeah vẫn được nhen Trí ơiii 😉

[@amanda2348-g9j]

Tại sao CSR lại ko tốt cho SEO vậy a?

[@EasyFrontend]

à tại CSR hk làm SEO đc em nhen, empty HTML đc trả về lần đầu, sau đó mới dần render nội dung phía client, mà SEO bot nó crawl thì nó tính lúc đầu à, mặc dù google bot nói support SPA, cơ mà chưa tốt và tối ưu như kiểu truyền thống, dạng HTML full data trả từ server em hen

[@amanda2348-g9j]

@@EasyFrontend vâng, cảm ơn anh nha

[@teocreator7946]

Để hiểu việc này một cách thấu đáo thì cần xâu chuỗi nhiều thứ, chứ không chỉ hiểu nôm na rồi dễ nhầm lẫn và mơ hồ. Trước hết cần hiểu về *giao thức http*, và trong 1 gói tin transfer trên internet thì nó là cái gì. Và khi browser nhận được gói tin đó nó sẽ *paint như thế nào để ra cây dom* cho bạn đọc được UI, có điều đặc biệt ở đây là nextjs có một *cơ chế re-hydrate* hóa quá trình paint đó (một phần hay toàn bộ html đã được render trên server) để tạo ra việc thuận lợi cho SEO. Ở phase cuối của process chỉ là việc code *react binding các event handler* vào các node dom để tạo nên một interracial UI nữa là xong. Ưu điểm của việc này thêm nữa là *giảm thiểu gói bundle* để tăng tốc độ load lần đầu, bên cạnh đó là page nào hoàn toàn static thì bạn sẽ *đánh dấu static* để server chỉ serve file static mà k xử lý gì thêm nữa. Chi tiết hơn về SEO thì bạn cần hiểu thế nào là một *semantic page, và cái document outline* của nó cũng như tính tương quan với các keyword khi user search trên internet. Một ứng dụng thuần csr hoàn toàn chỉ bắt gói tin là 1 cục json(hầu hết ứng dụng web ngày này đều dùng format này) thì các bot net của Google k thể nào dùng cái cục đó để *index website*. Ssr hay csr đều có hay có dở, nhưng mấy ông dev frontend thì chỉ quan tâm/chỉ học csr, còn muốn biết nó khi nào nên hay không nên, ứng dụng nó làm cái gì ngoài real world thì cần học cả backend, đặc biệt .net, hiểu *cơ chế server nó hoạt động, database lưu trữ* như nào thì mới hiểu được chân tướng. Vài lời tâm sự từ một coder tay ngang!

[@HuyNguyen-nw1uh]

Rất cảm ơn anh

[@lookatme1346]

không có thể visa , có cách nào đki fan cứng đc không a

[@EasyFrontend]

hi em, em có thể dùng điện thoại android, mở youtube app và đăng ký bằng momo em nha

[@TanLe-il3vu]

Ngoài cách đăng ký fan cứng bằng visa và viettelpay còn cách nào khác không mn, đăng ký thẻ thanh toán khá phức tạp ạ

[@EasyFrontend]

hi em, em có thể dùng điện thoại android, mở youtube app và thanh toán bằng momo nhen, ios chưa hỗ trợ nè hihi

[@truongle4761]

nextjs nếu build ra rồi export vẫn có thể deploy lên server k cần nodejs. trước mình có làm 1 dự án như vậy

[@EasyFrontend]

yeah đúng òi Trường nhen, nhưng lúc đó chỉ phục vụ cho static sites được thôi nhé 😉

[@tungvu353]

A ơi. Hóng a hướng dẫn thằng Next-redux-wrapper a ạ. Đọc mãi mà chưa thẩm hết được

[@EasyFrontend]

hi em, cái này ko nằm trong dự định của anh, anh có series riêng về redux òi, nên sẽ ko gắn vào nextjs này nhen, nếu có thì anh sẽ cân nhắc ở cuối series, chia sẻ thêm cho mn chút xíu nhé hihi 😉

[@ohuy1294]

Cảm ơn anh nhiều

[@haptn]

Anh ơi, video này hình như chưa public slide phải không anh nhỉ? ^ ^

[@EasyFrontend]

haha đúng òi Hà ơi, slide ở đây nhen Hà drive.google.com/file/d/1BZFrsYBjvet2uDIjWFizZ7VIjActt1LH/view?usp=sharing

[@anhleduy5470]

e không có thẻ visa thì làm sao join được fan cứng đây anh?

[@EasyFrontend]

à em có thể ra cửa hàng Viettel Store để đăng ký Viettel Pay thẻ master card online em nhen, sau đó nạp tiền vào là thanh toán đc em nhé 😊

[@anhleduy5470]

@@EasyFrontend dạ em cảm ơn a.

[@kytosai]

Cho em hỏi 1 ý này, thực tế khi anh làm project reactjs/nextjs. Mỗi khi call api anh có call trực tiếp tới api không ? - Hay anh sẽ thông qua 1 lớp trung gian, ở lớp đó sẽ gọi api rồi nhận kết quả trả về và format cấu trúc trả về cho đơn giản hơn mục tiêu để ở phần view (hiển thị) ở component mình sẽ dễ for, hiển thị, bớt if/else loằng ngoằng trong code view không anh nhỉ ? - Ngoài ra còn có cái lợi là cấu trúc response trả về của API bị đổi thì trong lớp trung gian này sửa lại là xong phần view sẽ không bị ảnh hưởng Nếu thực tế anh có làm 1 lớp trung gian như vậy liệu anh có thể demo về ý tưởng phần này trong course này luôn được không. 1 vài ví dụ đơn giản cũng được ^^ , cảm ơn anh !

[@EasyFrontend]

hi Tiến ơi, chắc ý em là phần api module, anh luôn tách nó riêng ra em nhen. Trong tất cả các series của anh đều làm như vậy. Em có thể qua series redux saga để tham khảo nhé Tiến hihi khỏi mắc công đợi series này hehe

[@kytosai]

​@@EasyFrontend à ý em mấu chốt vấn đề là thực tế khi làm việc, anh nhận response từ API anh trả thẳng về view (component), tự phần view sẽ xử lý if / else các logic phức tạp luôn Hay anh sẽ xử lý format lại cấu trúc của respponse đó cho nó đơn giản hơn để khi phần view nhận dữ liệu sẽ dễ hiển thị hơn không ? Trong khoá học thì em nghĩ anh sẽ tinh giản bớt nhiều thứ, nên em muốn hỏi thực tế làm việc anh có làm cái công đoạn như trên em nói không nhỉ ?

[@EasyFrontend]

à anh hiểu ý em òi, vậy thì anh làm cả 2 đó Tiến. Trường hợp mà dữ liệu trả về, mình luôn cần phải biến đổi trước khi sử dụng --> xử lý tại tầng API luôn. Trường hợp mà dữ liệu trả về có nhiều cách sử dụng khác nhau tuỳ tình huống --> xử lý tại nơi sử dụng (service, component, ...) Chứ ko cứng nhắc 1 kiểu em nhen hihi

[@kytosai]

@@EasyFrontend dạ, em cảm ơn anh ^^ !!

[@hungoan7699]

vậy khi nào dùng Nextjs, khi nào dùng Expressjs vậy a?

[@EasyFrontend]

mình nghĩ đơn giản thế này NextJS: FE ExpressJS: BE

[@haiduy5141]

em mới vào nghề, nắm kiến thức cơ bản HTML, CSS, JS thì học luôn NextJS được luôn ko anh hay phải học cả ReactJS nữa ạ?

[@EasyFrontend]

hi em, do NextJS là react framework, nên đằng nào em cũng phải biết react rồi mới làm NextJS đc em nha

[@quanngouc4003]

Dùng tài khoản ngân hàng để mở thành viên được không anh.

[@EasyFrontend]

hi Quân, hiện youtube ko có hỗ trợ bank em nhen, nên mình phải dùng thẻ tín dụng òi. Trường hợp em ko có thẻ, em có thể dùng cái master card online của viettel pay em nhen 😉

[@quanngouc4003]

@@EasyFrontend 😭😭cái viettel pay của em nó đang bị lỗi

[@micaelbao]

À à trên web mới có ko có App (hội viên)

[@EasyFrontend]

yay cảm ơn em nhiều nhiều nhé

[@HuyNguyen-uc8bs]

Quá được luôn anh ơii

[@EasyFrontend]

hehe cảm ơn Huy nhé 😍

[@okitegamikyoko7638]

Mình thấy tiêu đề nó hói sai. Thằng nextjs nó cũng dùng reactjs. Nếu đúng là dùng CRA hay nextjs chứ nhỉ

[@EasyFrontend]

Yeah ý này cũng hợp lý đó bạn, mình cũng phân vân cái này :) Nhưng ý định của mình để phân biệt cho mn reactjs là thư viện, nextjs là react framework, mình có giải thích trong video á bạn

[@thuattran6653]

Mong ra phần kết hợp redux

[@EasyFrontend]

haha anh đang định bỏ =))) dự kiến là chắc ko có redux trong này em nhen 😉

[@thuattran6653]

@@EasyFrontend haizz em mong phần redux với redux saga k ak anh nếu được em em ủng hộ anh 100k này !

[@EasyFrontend]

@@thuattran6653 hi em, anh có series redux saga rồi mà, em tham khảo thử nhé 🙂

[@thuattran6653]

@@EasyFrontend em học rồi mà bên react anh h qua next setup các kiểu k giống lắm kiểu chưa hiểu luồn dữ liệu ấy anh

[@EasyFrontend]

à vậy thì đơn giản em nè hihi em tham khảo bản setup mà nextjs dựng sẳn nhé 😉

[@nguyenpham4524]

Vậy không học React mà học luôn NextJS được không Hậu ? :))

[@EasyFrontend]

haha hk đc Nguyên ơi, nextjs là react framework, nên cơ bản mình cũng phải biết reactjs nó hoạt động thế nào nhen hehe, còn trong series này sẽ ko đề cập tới việc đó, chỉ tập trung nextjs 😉

[@nguyenpham4524]

@@EasyFrontend ok Hậu, a đang làm backend, dạo này thấy mấy cái này đang hot nên đang xem các video về react của em để học, nó rất hay và dễ hiểu, các truyền đạt rất tốt

[@EasyFrontend]

yeahhh em cảm ơn anh Nguyên nhiều nhiều ạ hihi rất vui khi videos hữu ích anh ơi hihi ❤️

[@sonphucdat]

em mới học xong khóa js cơ bản. giờ em học thẳng Nextjs luôn được không anh,? hay phải học qua thằng Reactjs ạ ?

[@EasyFrontend]

à hk đc em nhé, phải học reactjs trước em nhen. NextJS là react framework á em 😅

[@sonphucdat]

@@EasyFrontend Dạ em cảm ơn anh

[@2eem]

Trang chủ Reactjs không còn create-react-app nữa rồi,giờ chắc phải học thêm nextjs :((

[@EasyFrontend]

yeah nextjs khá xịn, em có thể tham khảo thêm nhen

[@vinhngo5201]

bình luận đầu tiên ^^

[@EasyFrontend]

haha ngon lành 🤣

[@dienphamvan3094]

Cảm ơn anh nhìu