Client Side Rendering vs Server Side - which is Best?

  Рет қаралды 54,819

Stefan Mischook

Stefan Mischook

Күн бұрын

Today we are seeing a move towards client side rendering over server side rendering of pages. What are the pros and cons of this move to using client side JavaScript? This is driven by client side web frameworks like vue.js, angular.js and reactjs.
reactjs.org/
vuejs.org/
angular.io/
My popular courses:
Learn web development fast: shop.killervideostore.com/
Learn Python 3 fast: www.killervideostore.com/python/
My business courses:
Complete Freelancer: www.killervideostore.com/free...
Complete Entrepreneur: www.killervideostore.com/vide...
My social links:
Instagram: stefanmisch...
Twitter: / killersites
Thanks!
Stef
#webappdevelopment #clientsidecoding #vuejs

Пікірлер: 72
@MrPDTaylor
@MrPDTaylor 5 жыл бұрын
Thanks so much Stefan! As usual your videos give so much daily motivation!
@chronotriggerfan
@chronotriggerfan 5 жыл бұрын
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.
@Avlec1000
@Avlec1000 3 жыл бұрын
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.
@chronotriggerfan
@chronotriggerfan 3 жыл бұрын
@@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.
@uelude
@uelude 4 жыл бұрын
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.
@venom_lowrider
@venom_lowrider 5 жыл бұрын
Thanks for the explanation! Video quality is great - very clear and sharp!
@gabrielsoloman5000
@gabrielsoloman5000 4 жыл бұрын
nice discussion, thanks for bringing this in such a wide angle
@busyrand
@busyrand 5 жыл бұрын
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.
@1974rachavez
@1974rachavez 3 жыл бұрын
The video looks really good, and the sound is amazing. Lastly, the information conveyed on your video is very helpful, thank you!
@justincook8473
@justincook8473 5 жыл бұрын
Video quality is great!
@EntreMaster
@EntreMaster 5 жыл бұрын
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!
@alex_8704
@alex_8704 5 жыл бұрын
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.
@MrAmk301
@MrAmk301 5 жыл бұрын
For better UX, use client side JS
@MohammadMohammad-kb3bj
@MohammadMohammad-kb3bj 5 жыл бұрын
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
@Zac2241
@Zac2241 5 жыл бұрын
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
@talehfeyzulla6435
@talehfeyzulla6435 4 жыл бұрын
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?
@sharingon47447
@sharingon47447 4 жыл бұрын
Video is definitely a lot cleaner. Appreciate the content and was wondering abiut server side rendering for my own site.
@AlazTetik
@AlazTetik 3 жыл бұрын
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.
@zinaright
@zinaright 4 жыл бұрын
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
@sevdalink6676
@sevdalink6676 4 жыл бұрын
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)
@LukeAvedon
@LukeAvedon 5 жыл бұрын
Are you going to play the drums for us?
@eliastouil7686
@eliastouil7686 4 жыл бұрын
Badum tss
@christianjamesguevarra6257
@christianjamesguevarra6257 5 жыл бұрын
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
@JonathanLoganClark
@JonathanLoganClark 3 жыл бұрын
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.
@pjf7044
@pjf7044 Жыл бұрын
How does cache work? Is it just an image of data that has been fetched prior
@harshilparmar9076
@harshilparmar9076 4 жыл бұрын
Sir, please make a video on how to choose the technology stack.Thanks
@emonymph6911
@emonymph6911 2 жыл бұрын
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!?
@openedmind3704
@openedmind3704 5 жыл бұрын
What about JAMstack and so on?
@bryku
@bryku 5 жыл бұрын
Good quality video, but I like these little topics where you start rambling.
@Saschaborg
@Saschaborg 5 жыл бұрын
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!!
@brianlaudrupchannel
@brianlaudrupchannel 3 жыл бұрын
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?
@jakobnilsson4704
@jakobnilsson4704 5 жыл бұрын
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?
@StefanMischook
@StefanMischook 5 жыл бұрын
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/
@pushqrdx
@pushqrdx 5 жыл бұрын
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')
@StefanMischook
@StefanMischook 5 жыл бұрын
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.
@kuriensandeep
@kuriensandeep 5 жыл бұрын
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.
@lindascoon4652
@lindascoon4652 3 жыл бұрын
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.
@RondellKB
@RondellKB 3 жыл бұрын
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.
@Ownedyou
@Ownedyou 5 жыл бұрын
I like my clients like I like my women: THICC. :D
@invictuz4803
@invictuz4803 3 жыл бұрын
The video quality is top notch AAA grade. I thought I was watching the newest James Bond film.
@cynthia7000
@cynthia7000 3 жыл бұрын
Super video! I applauded for $2.00 👏
@newprogrammer1811
@newprogrammer1811 5 жыл бұрын
what is better staticType or DybamicType
@igorthelight
@igorthelight 5 жыл бұрын
Static type is more performant (depends on the language) and easier to debug.
@YoungGrizzly
@YoungGrizzly 4 жыл бұрын
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.
@furrukhjamal00
@furrukhjamal00 5 жыл бұрын
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
@tr233
@tr233 5 жыл бұрын
Personally i prefer Server side rendering, well i am java injected programmer ;)
@joeyalfaro2323
@joeyalfaro2323 3 жыл бұрын
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.
@James-li8cm
@James-li8cm 5 жыл бұрын
bout time someone points out the potential for over use of javascript in the web browser.
@davidbasil2727
@davidbasil2727 5 жыл бұрын
I had this question in my head for almost 2 years and still can't find a proper answer.
@StefanMischook
@StefanMischook 5 жыл бұрын
Depends on the app in particular and the audience.
@MohammadMohammad-kb3bj
@MohammadMohammad-kb3bj 5 жыл бұрын
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
@rhettherring4846
@rhettherring4846 4 жыл бұрын
As a user I'm not a fan of SPAs in most cases.
@kartikmakwana6328
@kartikmakwana6328 5 жыл бұрын
What is rendering in terms of website ?
@StefanMischook
@StefanMischook 5 жыл бұрын
Reading and processing the HTML, CSS and JavaScript. Learn it all in this package: shop.killervideostore.com/
@brianlaudrupchannel
@brianlaudrupchannel 3 жыл бұрын
Server side all the way!!
@bojangles4071
@bojangles4071 5 жыл бұрын
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.
@panstromek
@panstromek 5 жыл бұрын
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.
@osintistrash
@osintistrash 4 жыл бұрын
Client side: gay Server side: B) hacc time
@seiferkinsdale1097
@seiferkinsdale1097 3 жыл бұрын
Thank you Nicolas Cage.
@hleet
@hleet 5 жыл бұрын
too complicate explanation. Pictures tell thousands words
@StefanMischook
@StefanMischook 5 жыл бұрын
Then you need my course!! It will make all this seem super simple: shop.killervideostore.com/
@isaiahballah2787
@isaiahballah2787 5 жыл бұрын
First haha
@biofluorescence
@biofluorescence 5 жыл бұрын
Second
@Md.NajmulHasan-xo9qh
@Md.NajmulHasan-xo9qh 3 жыл бұрын
dum dum you concept what actually you want to say. 👕
@sotacan
@sotacan 4 жыл бұрын
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.
@davidbasil2727
@davidbasil2727 5 жыл бұрын
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.
@dicejones3654
@dicejones3654 4 жыл бұрын
David Basil what????
@tylerpulse3428
@tylerpulse3428 4 жыл бұрын
Yeah, that's not accurate
Do you REALLY need SSR?
18:15
Theo - t3․gg
Рет қаралды 163 М.
БОЛЬШОЙ ПЕТУШОК #shorts
00:21
Паша Осадчий
Рет қаралды 10 МЛН
Red❤️+Green💚=
00:38
ISSEI / いっせい
Рет қаралды 65 МЛН
Жайдарман | Туған күн 2024 | Алматы
2:22:55
Jaidarman OFFICIAL / JCI
Рет қаралды 1,8 МЛН
Best father #shorts by Secret Vlog
00:18
Secret Vlog
Рет қаралды 22 МЛН
Are SPAs better than MPAs? | HTTP 203
25:42
Chrome for Developers
Рет қаралды 42 М.
Client Side vs Server Side Programming - Basic Concepts
10:19
Stefan Mischook
Рет қаралды 48 М.
The Drawback of Client Side Rendering
9:46
Ben Awad
Рет қаралды 181 М.
WTF Do These Even Mean
13:44
Web Dev Simplified
Рет қаралды 78 М.
Pure React vs Next.js | What’s Happening in React?
12:23
Lama Dev
Рет қаралды 53 М.
The 3 Ways Web Apps Generate Pages - which is best?
23:21
Stefan Mischook
Рет қаралды 10 М.
Understanding React's UI Rendering Process
29:07
CrossComm, Inc.
Рет қаралды 209 М.
Server-side rendering (SSR) with Angular Universal
25:10
Fun Of Heuristic
Рет қаралды 39 М.
Client-Side VS Server-Side Rendering - Data Fetching with Next.js
13:20
freeCodeCamp Talks
Рет қаралды 181 М.
БОЛЬШОЙ ПЕТУШОК #shorts
00:21
Паша Осадчий
Рет қаралды 10 МЛН