NextJS 14 Trick I bet you didn't Know 🤯

Hey Everyone, In this video, we'll see a cool trick of NextJS 14 to understand how Server and Client components actually work and how you can compose both of these.
Master NextJS 14 learn.piyushga...
Full Stack Twitter Clone learn.piyushga...
Master Docker learn.piyushga...
Video Titles
- React Server Components
- NextJS 14
- NextJS 14 Server Components
- How to Render Server Component inside Client Component
Hashtags
#reactjs #nextjs #nextjs14 #nodejs #webdevelopment #fullstackwebdevelopment

[@itzaxen]

That's what I want to learn. Thank you bro. Mai 3 days se ye issue me fasa hua tha. Mujhe 1 server component banana tha Jo client pe render ho aur uske baad uspe client component dom manipulation kar paye.

[@sumitsahu8657]

Hello Piyush, I'm currently working on a company project. Could you please create a video discussing the best practices for API integration? Specifically, I'm interested in understanding the pros and cons of making a direct database call versus creating APIs in a separate file. I would appreciate insights into the best and standard practices in this regard.

[@DeveloperZenid]

hi sir, you're content is really great and explain every aspect . i have a request can you make a video on how to auto generate the SWAGGER docs with joi validation and route endpoints in NODEJS. it will be very helpfull sir 🙂. I hope you definitely make video on it .

[@abhishekvishwakarma9045]

Great video! 🔥 Actually, I made a tweet about the same problem, and it took me some time to figure out the solution, which is exactly what you mentioned in the video.

[@europeanandasian9463]

Bro thanks your way of teaching is great

[@rajbongshi2002]

You are working great🔥But you should have shown the same about client component under server component. Plz make a video on this topic

[@ChiragKachhadiya-n7h]

Hiii, please create a video on best tips and trick for Next JS project , 👇 Vote for this

[@thisishabib744]

Very useful video. Tnx bro 🇧🇩❤

[@abdussamad0348]

I also did this in twitter clone course, this thing is also mentioned in next.js documentation..

[@entrepreneurcoder2659]

Hey piyush keep bringing more such videos

[@sudityashrivastav]

How will show something like skeleton while server component is fetching data... The whole page gets busted 🙄

[@Zer0.]

Wrap the server component in Suspense

[@plbxwoofzoo6883]

I have a doubt !!! What if instead of changing count in the client comp , the data inside the todo (server) component changes... How could this be implemented without using context.??? helppppp

[@S--xc4rv]

Always curious about this topic , thanku for such a clear video . Though what if there is a nested children , will it be a good method also ?

[@plbxwoofzoo6883]

I am in the 5min in this vid , i can guess that we can solve this by wrapping server component inside client component . I did it before while i was doing FullStack twitter clone since i followed App version of the next js....

[@GauravKumar-w5q9q]

Why in first approach you can still see the data in view page source ?

[@AshishKumar-ft6wv]

Gajab! Nice Nice Nice

[@acchpankaj]

sir, i have written fetch api code in server side. now I want to use same api for search based on any parameter. how to do in server side component in next 14. Could you please suggest.

[@pankajdixit125]

Can you elaborate how we can use redux with next js

[@S4LTYT]

Can we wrap both welcome and data component with server parant component ? so there will be mixter of parent and child component by using or not "use client" ?

[@pranshubasak8796]

Hi sir , apka course Master NextJS 14 Codedamn me kab ayega , codedamn really need an updated course on next js .

[@JamesBond-mc7kl]

Could you please make a video on protected pages in next js with redux toolkit

[@rameshkhan3469]

Any coupon code available for the course?

[@Shyam_Mahanta]

Great video 📷

[@codenerd7823]

Pls create a video about your VS Code themes and extension. I really liked it.

[@sushieatingcobra]

please a make detailed paid course on AWS and its servvices like S3 Lambada ECS EC2 Eks Fargate elastci bean which covers all these and AWS ecosystem as a whole

[@babunandanagrahari717]

Best way thanks

[@Shyam_Mahanta]

Is there any discount?

[@priyanshugupta9816]

I know this. This was present before also before server action.

[@urstrulypriyankrai]

Is this the same behaviour after building the project

[@rahees_ahmed]

Bahi kuch din phely tu ny hi video bnai the k nextjs bekaar hy php ki tarah hy r ak phr new video?

[@SHERSHAAH555]

bro i purchased ur next js couse and now that page isnt available

[@piyushgargdev]

Hi, Sorry for the inconvenience. Today AWS is down. It will be up once aws is up and running

[@SHERSHAAH555]

@@piyushgargdev ohh ok sure np

[@piyushgargdev]

@@SHERSHAAH555 Issue resolved! Thanks for your patience 😄

[@Sunil-e1d6b]

Hey I want to ask you a topic if you could help me out when I search in linked in node js job related there they required relational data base and they did not mention by using orm like prisma or sequalizer or by pure SQL query ,in orm they provide there syntax what should I learn

[@rishiraj2548]

👍💯💯

[@graphicccccc]

That’s a catch

[@SHERSHAAH555]

Corse Hindi me hai na ?

[@doctoronline461]

free kardo a series piyus please

[@laughAFrame]

Next.js ssr is so annoying. It doesn't work with a lot Npm libraries like Charts, Calendars , schedulers. I was working with a dashboard that had to have a Scheduler like GOOGLE SCHEDULER etc. I tried using REACT BIG CALENDAR, but a lot of function related to big calendar didn't work cos of SSR. I tried using dynamic import but still didn't work. Next.js is good for project like small web apps like social media apps, Ecommerce etc. It's not good for management systems.

[@sumitsahu8657]

then why didn't you use "use client" for that particular component

[@laughAFrame]

@@sumitsahu8657 use client does not work on it.

[@MdNajmulHossen-t3t]

dada don't have any international card. Free dedoo😊😉

[@yogita868]

I have this created this file structure in Next js version ->14 project\[[id]] Inside page.tsx I have this code-> 'use client'; import PathwayContainer from '@/components/Pathways/PathwayContainer'; const PathwayPage = () => { const clientID = '06375fa6-999a-46a8-9d80-12e41e76aa52'; return ( ); }; export default PathwayPage; This clienID I would fetch from useselector later as of now i keep code like this. and this is the component for PathwayContainer. 'use client'; interface IPathwayContainerProps { fetchClientProjects: (clientId: string) => Promise; clientID: string; } const PathwayContainer: FunctionComponent = (props) => { const { fetchClientProjects, clientID, } = props; const [loading, setLoading] = useState(false); const [activeProjectList, setActiveProjectList] = useState([]) useEffect(() => { const getActiveProjectList = async () => { try { setLoading(true); const projectInfo = await fetchClientProjects(clientID); setActiveProjectList(projectInfo); } catch { } finally { setLoading(false); } } getActiveProjectList(); }, [clientID]) return ( {activeProjectList.map((activeProject, index) => ( {activeProject.name} ))} ); }; export default connect(() => ({}), { fetchClientProjects: actions.clients.fetchClientProjects, })(PathwayContainer); whevaver user clcik on this link which i have crated using clientID is not changed but my useeffect code runs again and again whenver user click on links. same code works fine in react. How can i solve this issue.please help.