Client-Side vs Server-Side Rendering, Simplified with JS, NodeJS, React & NextJS examples

Client-Side and Server-Side Rendering are one of the most popular concepts in Web Development; and these techniques are especially applicable to the way we build applications with frameworks.
In this video, I simplify the difference showing examples with Vanilla JS, NodeJS, React and NextJS
_____
Subscribe to My Channel: bit.ly/deeecode
_____
🌟 About Me:
Dillion Megida, creator of DEEECODE, is a Software Engineer, Developer Advocate and a Content Creator passionate about simplifying topics around Tech via articles and videos.
_____
⚡️ Connect with me:
- Personal youtube: / dillionmegida
- Personal website: dillionmegida.com/
- Twitter: / iamdillion
- Instagram: / deeecode
- LinkedIn: / dillionmegida
- GitHub: github.com/dillionmegida

[@marcosgabriel6221]

Ohh man, amazing explanation! Congratulations from Brazil

[@mjylove2]

amazing explanation ! thank you so much !

[@danielenagu2756]

Great explanation. Love it.

[@deeecode]

You’re very welcome :)

[@vitopanaia2983]

Really good video, was really concise and to the point :)

[@deeecode]

I’m so glad to hear ✨

[@ctchen1988]

SOOO clear, just being asked in an interview

[@deeecode]

I'm so glad to hear this was very helpful!

[@Youu88Tubee]

good one

[@koloy3k]

This was fantastic

[@deeecode]

I’m glad to hear ✨

[@anthonyikwuegbu9275]

Welldone Dee

[@deeecode]

Thank you!

[@user-de4zh8qm4w]

Very well brother you explained it with a great deal
After a lot more time it make sense for me what is ssr and csr

[@deeecode]

I'm so glad to hear this. You're welcome

[@JagTheRipper]

Hey I have a problem where now I am using ejs files to help render using server side rendering. However, I am now creating a form where the user inputs data to be stored in my back end. Ebverything works fine but now I want to make the form dynamic. So I have been trying to add in eventlisteners etc but realised I can't as I am always getting this error "Refused to execute script as MIM type checking is disabeled (text/html)" I realised it has to do with me trying to change the HTML tags with client side rendering while I am using server side. Is there a way to use both at the same time in this case or perhaps an easier option to in making dynamic forms?

[@oscarcaballero9930]

Good video

[@ugyenofficial]

Your follwer on tiktok and youtube. nice explanation

[@deeecode]

Thanks for the follows :)
You're welcome!

[@Fabulous.131]

Thank you

[@deeecode]

You're welcome

[@yashsharma6112]

What if I use "use client" directive in a component in NextJS. Would it be client side rendered or server side rendered

[@deeecode]

Sorry this answer is coming later....it will be server side rendered, and hydrated on the frontend...i explained it deeper in this video: czcams.com/video/9WAmxMQggIk/video.html

[@realmrtrice]

Thank you for the video. which tool did you use for the illustration

[@deeecode]

You're welcome!
I used excalidraw.com/