As usual, a very reasoned approach, Stefan - client-side rendering is useful but should be applied in moderation as opposed to the "default" architecture. One thing many people ignore is how difficult it is to get started in building a full-fledged app. So many suggest starting with JS not for the sake of the programmer, but the job market. There's already so much to learn as a beginner, from the framework, language, database, etc. If you throw synchronization of client and server state, async/await, a whole new front-end framework, linters, ES6 vs. vanilla JS, etc. it's much harder to get off the ground. Whereas if you're using a simple server-side templating engine like Python's Jinja2, you can build a working (even complex) application much faster and refactor it for some heavy JS framework later on if you so choose. At least, that was my experience when first getting into web app development.
I started working with Javascript when Netscape Navigator was a thing!! Back then everything was a lot simpler and dealing with cross browser compatibility was a nightmare (thanks internet explorer) Nowadays there are so many languages, frameworks and standards that I can see how it could be overwhelming for someone just starting out.
@@Avlec1000 I bet! The JS ecosystem went from a simple tool for interactivity to full-on insanity in a few short years. It's all so bifurcated, too - React is the undisputed front-end champion in the West, but Eastern companies default to Vue. React arguably has more functionality, but it also has a steeper learning curve. And advanced Vue developers are almost always Chinese, so finding good English documentation is tough. It's easy to see why so many talented developers throw in the towel and just stick to making WordPress themes with jQuery.
I remember my professor built a course with JavaScript and the quizzes were delivered client side. I used Chrome to inspect element and looked through the layers of his code. Within a couple minutes, I had the answers to all the questions. But, I didn't use this to my advantage since the quizzes were not graded... only a guide to help our learning. One of the reasons why I hesitate on using JS client-side b/c of security... I'm a server-side guy! BTW, I didn't see the video/camera quality upgrade that you mentioned. But your content is always great!
Boun, exactly. When the goal is to help learning, the answers embedded in JS may be Okay. I myself create learning web content and facilitating tests for the team inside my company and use internal Microsoft SharePoint to “host” those web pages. Them being static is the only option I have, but that’s cheap and relatively straight-forward.
i am not expert but as i figured out javascript has poor debugging methods and its hard to get the bug source ,in addition its behavior differs from browser to browser , so we can avoid client rendering as possible , some application to client rendering is for buttons that are being clicked too much and its boring to load the whole page . i am not expert but that is my opinion
I remember skipping a quiz written in flash by right clicking a hitting play until it ended. It wasn't graded but I could just bs around and still say I passed it
What are the cost differences between CSR SSR SSG!? Is client side rendering cheaper for your AWS to run? What if you use your own PostgreSQL database is it still cheaper? And by how much!?
i find this slightly contradictory with what you said about using cordova or phonegap, as you said "phones are so powerful these days, use cordova it doesn't matter". I mean for mobile you completely ignored the fact that there're still 'too' mobile phones that aren't powerful enough to handle a webview running all the javascript that's used for a cordova app. Why would it be _okay_ for mobile and not for desktops (which are already way past powerful enough to power a client side spa app 'if we only assume that all people run recent enough hardware')
I can see your point ... depends on your target audience. And the client side load that cordova and others load onto the phones is something that would have to be considered. There may be ways to send light enough of a JS payload in those situations.
Building native apps takes a lot of time and if you are a business you will have to hire somebody with a higher skill set. So it will probably cost atleast 3-4 times more money to create something in native compared to hybrid. At the end it comes down to the cost, how much time and money you are willing to spend. If you are chasing perfection, there is nothing better than native.
Your going to call the server anyway, so is the difference that the server returns the HTML is server side rendering, and front end rendering is when the server will return data (json, xml) and the JS will update the html?
I am confused about something. Where does ajax fit into client side rendering? I've just heard alot of mention of ajax when people are talking about client side rendering.
What Ajax does is the definition of client-side rendering. Ajax is not a language or framework, it's just a way of writing your javascript code such that you create or remove elements without refreshing your page. Don't know why they gave that concept a name though, as a beginner it can be misconstrued as another language to learn.
Yes Stefan, the video is coming through as 4K in Chrome. Some other browsers do not pay for the codec licensing and only display the video as 1080p (1K) though.
I'd love a deep dive into the subject like you mentioned. Fantastic video. I noticed the quality difference. Smooth transition to various depths of field.
If you'd ask me for feedback about the video quality... I'd say: what strikes me most is that reaaally strange color balance ;-) Looks kind of morbid, to be honest. Sorry for frankly speaking what I was already thinking several times :'/ EDIT: Colors in the HTML5 video (just before) seem to look better, I would say!!
Is it a big problem to build a web app in the classic way, and later, if it becomes successful to change it to REST or GraphQL architecture? (I am a beginner and do not know should I start my app or learn REST architecture and do it then)
I'm not a fan of server side rendering because I prefer that to be the place where data processing happens. Let the user/client system do all the view generation. Not the best for low bandwidth but my focus is on the data storage, retrieval, and manipulation.
Great vlog again! You talk about databases not so much. I think you should share your key experince on how to design and choose a db-system in a broader view.
Thank you Stefan for the very very useful videos. I wonder which type of language (client side or server side) would be better to create a web platform for online tutoring?
My advice to anyone learning anything get gel and paper write down every word or steps you don't understand and dig. Dig for information at your leisure. I watch video first then watch and pause then take notes. Research learning is eazy if you enjoy speaker.
I think you should try my course for sure! Not that I am biased! ;) That said, you can't loose since you get a 30 day money back guarantee! shop.killervideostore.com/
I want to know your thoughts on this medium article entitled "Dont be a junior developer". Seems like a good topic for a video esp for junior devs. Tnx
i am not expert but as i figured out javascript has poor debugging methods and its hard to get the bug source ,in addition its behavior differs from browser to browser , so we can avoid client rendering as possible , some application to client rendering is for buttons that are being clicked too much and its boring to load the whole page . i am not expert but that is my opinion
Anyone reading this could someone point me in the right direction, for practice I'm trying to implement minmax algorithm for a tic tac toe game in php using arrays and have no success for a few days
And not to mention the amount of effort, knowledge, and skills required to build a SPA is so enormous that sometimes I felt that I'm circling around just to implement a simple functionality. The only reason why I build spa is for polishing my resume.
Interesting.. In many cases, I actually find it easier (if you choose some good framework), because you can decouple the UI from business logic and database. It's a bit easier to reason about when you can focus just on the UI.
yea iv confirmed you dont know whats happening in modern web dev and are targeting keywords. lol, god you are misguiding people and it needs to STOP! I mean your experience is valid, from like a decade ago man, php/templating langs do of course do some server-side pre-processing. but yea server RENDERING today is a term used to describe recent trends in having your react/angular js which really represents html through their virtual doms, rendered into html/css on the server. So in Node.js since its already JS I can basically have the server pre-render common/static react,angular,ember js snippets. This means the client can render html immediately before even getting to the js interpretation unlike a standard react website. Ehm this will load something (FCP) visible faster but of course, will not improve time to interact (TTI) since you will need your JS event handlers. The modern approach is to use JS code splitting and stream the JS in prioritized chunks to the client. Eh, this is called progressive hydration and why this entire topic and the keywords are popular in recent years. My favorite library is Next.js for this personally but others exist.
As usual, a very reasoned approach, Stefan - client-side rendering is useful but should be applied in moderation as opposed to the "default" architecture.
One thing many people ignore is how difficult it is to get started in building a full-fledged app. So many suggest starting with JS not for the sake of the programmer, but the job market. There's already so much to learn as a beginner, from the framework, language, database, etc. If you throw synchronization of client and server state, async/await, a whole new front-end framework, linters, ES6 vs. vanilla JS, etc. it's much harder to get off the ground.
Whereas if you're using a simple server-side templating engine like Python's Jinja2, you can build a working (even complex) application much faster and refactor it for some heavy JS framework later on if you so choose. At least, that was my experience when first getting into web app development.
I started working with Javascript when Netscape Navigator was a thing!! Back then everything was a lot simpler and dealing with cross browser compatibility was a nightmare (thanks internet explorer) Nowadays there are so many languages, frameworks and standards that I can see how it could be overwhelming for someone just starting out.
@@Avlec1000 I bet! The JS ecosystem went from a simple tool for interactivity to full-on insanity in a few short years.
It's all so bifurcated, too - React is the undisputed front-end champion in the West, but Eastern companies default to Vue.
React arguably has more functionality, but it also has a steeper learning curve. And advanced Vue developers are almost always Chinese, so finding good English documentation is tough.
It's easy to see why so many talented developers throw in the towel and just stick to making WordPress themes with jQuery.
Thanks so much Stefan!
As usual your videos give so much daily motivation!
3:48 +1 for Deep Dive.
Great idea, this is becoming more and more relevant and I'm not seeing others tackle this effectively whatsoever.
How does cache work? Is it just an image of data that has been fetched prior
I remember my professor built a course with JavaScript and the quizzes were delivered client side. I used Chrome to inspect element and looked through the layers of his code. Within a couple minutes, I had the answers to all the questions. But, I didn't use this to my advantage since the quizzes were not graded... only a guide to help our learning. One of the reasons why I hesitate on using JS client-side b/c of security... I'm a server-side guy!
BTW, I didn't see the video/camera quality upgrade that you mentioned. But your content is always great!
Boun, exactly. When the goal is to help learning, the answers embedded in JS may be Okay. I myself create learning web content and facilitating tests for the team inside my company and use internal Microsoft SharePoint to “host” those web pages. Them being static is the only option I have, but that’s cheap and relatively straight-forward.
For better UX, use client side JS
i am not expert but as i figured out javascript has poor debugging methods and its hard to get the bug source ,in addition its behavior differs from browser to browser , so we can avoid client rendering as possible , some application to client rendering is for buttons that are being clicked too much and its boring to load the whole page . i am not expert but that is my opinion
I remember skipping a quiz written in flash by right clicking a hitting play until it ended. It wasn't graded but I could just bs around and still say I passed it
Super video! I applauded for $2.00 👏
Video quality is great!
In my opinion, for apps with sensitive data access, the less info you push to the client the better. Most heavy lifting ought to be on the server side
What are the cost differences between CSR SSR SSG!? Is client side rendering cheaper for your AWS to run? What if you use your own PostgreSQL database is it still cheaper? And by how much!?
i find this slightly contradictory with what you said about using cordova or phonegap, as you said "phones are so powerful these days, use cordova it doesn't matter". I mean for mobile you completely ignored the fact that there're still 'too' mobile phones that aren't powerful enough to handle a webview running all the javascript that's used for a cordova app. Why would it be _okay_ for mobile and not for desktops (which are already way past powerful enough to power a client side spa app 'if we only assume that all people run recent enough hardware')
I can see your point ... depends on your target audience. And the client side load that cordova and others load onto the phones is something that would have to be considered. There may be ways to send light enough of a JS payload in those situations.
Building native apps takes a lot of time and if you are a business you will have to hire somebody with a higher skill set. So it will probably cost atleast 3-4 times more money to create something in native compared to hybrid. At the end it comes down to the cost, how much time and money you are willing to spend. If you are chasing perfection, there is nothing better than native.
Are you going to play the drums for us?
Badum tss
Your going to call the server anyway, so is the difference that the server returns the HTML is server side rendering, and front end rendering is when the server will return data (json, xml) and the JS will update the html?
The video looks really good, and the sound is amazing. Lastly, the information conveyed on your video is very helpful, thank you!
I am confused about something. Where does ajax fit into client side rendering? I've just heard alot of mention of ajax when people are talking about client side rendering.
What Ajax does is the definition of client-side rendering. Ajax is not a language or framework, it's just a way of writing your javascript code such that you create or remove elements without refreshing your page. Don't know why they gave that concept a name though, as a beginner it can be misconstrued as another language to learn.
nice discussion, thanks for bringing this in such a wide angle
Yes Stefan, the video is coming through as 4K in Chrome. Some other browsers do not pay for the codec licensing and only display the video as 1080p (1K) though.
I'd love a deep dive into the subject like you mentioned. Fantastic video. I noticed the quality difference. Smooth transition to various depths of field.
If you'd ask me for feedback about the video quality... I'd say: what strikes me most is that reaaally strange color balance ;-) Looks kind of morbid, to be honest. Sorry for frankly speaking what I was already thinking several times :'/
EDIT: Colors in the HTML5 video (just before) seem to look better, I would say!!
Is it a big problem to build a web app in the classic way, and later, if it becomes successful to change it to REST or GraphQL architecture? (I am a beginner and do not know should I start my app or learn REST architecture and do it then)
I'm not a fan of server side rendering because I prefer that to be the place where data processing happens. Let the user/client system do all the view generation. Not the best for low bandwidth but my focus is on the data storage, retrieval, and manipulation.
Thanks for the explanation! Video quality is great - very clear and sharp!
The video quality is top notch AAA grade. I thought I was watching the newest James Bond film.
Great vlog again! You talk about databases not so much. I think you should share your key experince on how to design and choose a db-system in a broader view.
Sir, please make a video on how to choose the technology stack.Thanks
What about JAMstack and so on?
Thank you Stefan for the very very useful videos. I wonder which type of language (client side or server side) would be better to create a web platform for online tutoring?
My advice to anyone learning anything get gel and paper write down every word or steps you don't understand and dig. Dig for information at your leisure. I watch video first then watch and pause then take notes. Research learning is eazy if you enjoy speaker.
I like my clients like I like my women: THICC. :D
Already confident with python but id like to complement with php for web. Do you guys think I should try his course or just stick to free yt videos?
I think you should try my course for sure! Not that I am biased! ;) That said, you can't loose since you get a 30 day money back guarantee! shop.killervideostore.com/
Video is definitely a lot cleaner. Appreciate the content and was wondering abiut server side rendering for my own site.
what is better staticType or DybamicType
Static type is more performant (depends on the language) and easier to debug.
As a user I'm not a fan of SPAs in most cases.
I had this question in my head for almost 2 years and still can't find a proper answer.
Depends on the app in particular and the audience.
I want to know your thoughts on this medium article entitled "Dont be a junior developer". Seems like a good topic for a video esp for junior devs. Tnx
Personally i prefer Server side rendering, well i am java injected programmer ;)
Server side all the way!!
What is rendering in terms of website ?
Reading and processing the HTML, CSS and JavaScript. Learn it all in this package: shop.killervideostore.com/
bout time someone points out the potential for over use of javascript in the web browser.
i am not expert but as i figured out javascript has poor debugging methods and its hard to get the bug source ,in addition its behavior differs from browser to browser , so we can avoid client rendering as possible , some application to client rendering is for buttons that are being clicked too much and its boring to load the whole page . i am not expert but that is my opinion
Anyone reading this could someone point me in the right direction, for practice I'm trying to implement minmax algorithm for a tic tac toe game in php using arrays and have no success for a few days
Good quality video, but I like these little topics where you start rambling.
Thank you Nicolas Cage.
And not to mention the amount of effort, knowledge, and skills required to build a SPA is so enormous that sometimes I felt that I'm circling around just to implement a simple functionality. The only reason why I build spa is for polishing my resume.
Interesting.. In many cases, I actually find it easier (if you choose some good framework), because you can decouple the UI from business logic and database. It's a bit easier to reason about when you can focus just on the UI.
Client side: gay
Server side: B) hacc time
too complicate explanation. Pictures tell thousands words
Then you need my course!! It will make all this seem super simple: shop.killervideostore.com/
yea iv confirmed you dont know whats happening in modern web dev and are targeting keywords. lol, god you are misguiding people and it needs to STOP! I mean your experience is valid, from like a decade ago man, php/templating langs do of course do some server-side pre-processing. but yea server RENDERING today is a term used to describe recent trends in having your react/angular js which really represents html through their virtual doms, rendered into html/css on the server. So in Node.js since its already JS I can basically have the server pre-render common/static react,angular,ember js snippets.
This means the client can render html immediately before even getting to the js interpretation unlike a standard react website. Ehm this will load something (FCP) visible faster but of course, will not improve time to interact (TTI) since you will need your JS event handlers. The modern approach is to use JS code splitting and stream the JS in prioritized chunks to the client. Eh, this is called progressive hydration and why this entire topic and the keywords are popular in recent years. My favorite library is Next.js for this personally but others exist.
dum dum you concept what actually you want to say. 👕
Second
First haha
By the way, there is no such thing as a server-side rendering. Whether its a json or html, its always client's browser that does the rendering.
David Basil what????
Yeah, that's not accurate