@@4Sell from the video: "SPAs have problems with SEO because search engine crawlers dont necessarily wait for the javascript code running in the browser to complete rendering especially when you first of all need to fetch some content from inside your js code". This explanation was enough for me personally...I hope this helped
You like air max too? I have about 15 pairs including the ones behind you :) I love the white and red. I collect those along with Jordan 1s. Great vid by the way :)
remember all those older PHP sites that returned a different content page based on an id tag given as an URI component? Yeah.. I don't miss those days.. I like the way routing is implemented and works today.
Great video! I think the pros and cons should also include mention of scalability. Server side rendering is very expensive especially when you have to serve thousands of clients per hour. SPAs can scale to unbelievable heights because the burden is now on the clients. Most laptops are mobile devices are less than 5 years old and well capable of SPAs so I don't think rendering performance is really a concern any more. My point is that when you also offload your static content including all images, the SPA JavaScript bundle itself to a CDN (Content Delivery Network) you are basically left with just API requests. Depending on your application this could easily be 10 x improvement. Not forgetting that you no longer need to.cache any static content on your site. Expose that naked NGINX which is BTW superb for this application.
Maximilian Schwarzmüller is a top of the top educater - every video I know is undoubtable leading straight to the announced content - no frills at all.
The most enjoyable thing about SLA is the fact the frontend code finally get well structured just like a backend application. Everything is a component. That being said, this type of structure can be achieved with web components with no SPA involved.
It feels like this video is a lowkey introduction for gatsbyjs and where this technology sits in place. i like gatsby, please make a comprehensive tutorial. 👍
I like Gatsby but the video is not supposed to be an introduction to it ;) I might create a tutorial on it in the future, but I got no concrete plans to do so at the moment.
Seems like all major downsides of SPAs are eleminated when the page is shipped as an Electron application. So for Electron a SPA-framework is the most suitable I guess. ;)
Damn, this video answered so many of my questions. I really like the fact that there's no better technology, but rather everything is great depending on the situation. Great video, have a nice day :)
I would add a pro for spa which is based on the fact that you can offload the server by removing the task of rendering. Also the nature of spa sometimes requires second database like redis for storing critical information. That way can an app can gain huge performance improvements due to asynchronous nature of the connection between server and client.
To be honest it gives me a false sense of achievement. It's OK to link all stuff and make everything work like a well-structured plan. But like... It's not challenging, it just takes a bit more time but it's not hard 🙄
@@JR-mk6ow true dat, asynchronous stuff has always been more challenging than pure dynamic code.... tho, in comparison against whats out there, web development has always been kind of "baby programming" for me... if you want to challenge yourself, go for functional languages and math heavy programming like game engines, audio programming and so on... for free time there are also esoteric langs, to get to know your limits :)
@@911madza really? I did some websites with Django and SPA apps with React and Vue. I have to say SPA is much more fun to do. I also prefer the fact the backend is totally separated from the frontend with microservice type of architecture
I must rebuild one static web site for rental, which have good SEO, when I make it dynamic will I lost popularity and how much ? What is better to be done in my case??
For static websites, why can't we just use javascript to fetch data from backend api and use dom manipulation to update the page? In this way we achieve the same result as dynamic websites, but with isolated front end and back end. Is this a common use case?
This is exactly what I’m doing with the current project I’m working on. Being a long-time “old-school” developer with stacks like ASP/SQL server and Php/MySQL, I made the effort to learn React and Vue, and even started rewriting the application with the framework. I finally came to the conclusion that it introduced as many issues as it solved, and was a headache. Most of the site now is php/MySQL, and there are one or two pages which benefit from SPA-like functionality (what we used to call DHTML). I simply execute JavaScript fetches on that page, and update dynamically and manipulate the DOM. There really is no need for an entire JavaScript framework. SPAs are just du-jour right now. Most of the time, you don’t need a mallet to crack a nut.
Hello, as far as I know React is used mostly for SPA. I m curious what developers use mostly for multi page apps. What are the most popular choices? I know that with Node JS you can use some template engines to make pages dynamic. Can you tell me most popular choices for multi page applications? I know that SPAS are a thing right now and almost everything is built that way but I was curious about multi page apps too.
with static sites you dont have to worry about security, backing the database, patching the code when there is a new hack exploit, etc. and it costs less.
I want to build a personal portfolio with 3 sections (home, projects, about), and whenever the user clicks on one of those sections, the content currently displayed on the page fades out, then the new content fades in. To achieve this, which type of website should I approach?
Danke vielmals! Der Hammer. Great English, how did you learn? I'm a web dev and TEFL cert holder and love languages and learning them. Always interested in how people get involved in other speaking other tongues.
Web browsers and http was never supposed to be an "app". If you want an "app" experience, download it from the play store or install it on your computer.
@@academind Barely. 95% of websites are traditional multi-page, server-rendered applications. And mobile app market is growing daily. Web will never have native (mobile and desktop) applications.
How do we clone your drive, knowledge and teaching skill? Wow!! As I watch your output I wonder about the organization you've built. I would hope you have a consulting/product division running too. Your udemy support people are superb! So you don't have a problem selecting and delegating in such an enterprise.
Wow, thanks so much! That's really amazing to hear! :) Currently, I got no consulting plans though - I just love coding and creating tutorials/ demos etc
what about deploying a node app that executes a client (React application)? is that a a bad practice? I used this approach for manage an office 365 authentication in multiple resources (client auth, adal, API).
Hi, already I have an app with integrated angular and nodejs run on the same server. How can I do server side rendering of angular in this existing Integrated approach by using angular universal?
So please can we harness the advantages in all of them so that we can get a perfect website with no downsides or we have to choose only one for a particular project??
Never been convinced by SPA's. For 99% of cases they aren't necessary and you end up just re-implementing browser functionality in a more buggy and less secure way.
So, if you want to build your or anyone else's portfolio/personal site, what would you use? Would you still go the SPA way? (that's what I'm trying to do)
As long as you make a real native app, it doesn't matter if your website is dynamic, static or a single page. Use whatever works best. Just don't go confusing websites and apps. Or worse, try to make a PWA.
Which kind of web pages have you built already? What was most fun?
Hi Max,
I created SPAs via React. It was most fun.
SPA (including OpenId and OAuth2) with React/Angular and Lumen
Both static and SPAs, the latter im now having fun building with react
@@4Sell from the video: "SPAs have problems with SEO because search engine crawlers dont necessarily wait for the javascript code running in the browser to complete rendering especially when you first of all need to fetch some content from inside your js code". This explanation was enough for me personally...I hope this helped
I have created simple static ones (html - css - js), an SPA with Vue, a Universall with Nuxt and a couple of static ones with Nuxt.
You like air max too? I have about 15 pairs including the ones behind you :) I love the white and red. I collect those along with Jordan 1s. Great vid by the way :)
This is a really needed video, especially for those coming from the oldest approach.
Thanks so much Brad!
And yeah, started wearing them a few months ago and got into collecting them (kind of...)
My two favorite instructors, Brad and Max!
@@TheInphinion true that! I had the same idea when I read Brad's comment. Both channels are awesome!
Two of the greatest educators on RUclips
remember all those older PHP sites that returned a different content page based on an id tag given as an URI component?
Yeah.. I don't miss those days.. I like the way routing is implemented and works today.
Static Pages for the main website
Dynamic Website for Blogs, Forums etc
Single Page Apps for Tools, Applications etc
Perfect, that was exactly what I was looking for to show to some begginers in web dev world. Thank you very much!
Great video! I think the pros and cons should also include mention of scalability. Server side rendering is very expensive especially when you have to serve thousands of clients per hour. SPAs can scale to unbelievable heights because the burden is now on the clients. Most laptops are mobile devices are less than 5 years old and well capable of SPAs so I don't think rendering performance is really a concern any more. My point is that when you also offload your static content including all images, the SPA JavaScript bundle itself to a CDN (Content Delivery Network) you are basically left with just API requests. Depending on your application this could easily be 10 x improvement. Not forgetting that you no longer need to.cache any static content on your site. Expose that naked NGINX which is BTW superb for this application.
Maximilian Schwarzmüller is a top of the top educater - every video I know is undoubtable leading straight to the announced content - no frills at all.
The most enjoyable thing about SLA is the fact the frontend code finally get well structured just like a backend application. Everything is a component.
That being said, this type of structure can be achieved with web components with no SPA involved.
I searched many videos for this topic, so far this is the best explanation I found on RUclips
It feels like this video is a lowkey introduction for gatsbyjs and where this technology sits in place. i like gatsby, please make a comprehensive tutorial. 👍
I like Gatsby but the video is not supposed to be an introduction to it ;) I might create a tutorial on it in the future, but I got no concrete plans to do so at the moment.
Seems like all major downsides of SPAs are eleminated when the page is shipped as an Electron application. So for Electron a SPA-framework is the most suitable I guess. ;)
I come back to this video every now and then to make order into my mind, you are a hero!
Damn, this video answered so many of my questions. I really like the fact that there's no better technology, but rather everything is great depending on the situation. Great video, have a nice day :)
Awesome to read that the video was helpful for you! Thanks for your great feedback, I also wish you a nice day :)
This video really filled a lot of knowledge gaps that i had regarding web development
I would add a pro for spa which is based on the fact that you can offload the server by removing the task of rendering. Also the nature of spa sometimes requires second database like redis for storing critical information. That way can an app can gain huge performance improvements due to asynchronous nature of the connection between server and client.
Thank you for a great explanation! I´ve been trying to figure out the differences for months. I also like the new background.
Thanks a lot for your awesome feedback Laura!
Another challenge for SPA's can be accessibility. Audio browsers can find it difficult on detect browser generated content.
Ah got it. I was confused about this sever side rendered and client side rendered. Your explanation is really good. Thanks.
Amazing Video Max!! You are great explaining!! What about using Nuxt JS for solving problem with SEO?
Thank you so much! Sure, Nuxt.js is decent for that - you can build both a SSR and pre-rendered (static) site with it
although SPA is where its at in 2019, dynamic sites are much more fun to build (especially if you are specialized in back-end)
To be honest it gives me a false sense of achievement. It's OK to link all stuff and make everything work like a well-structured plan. But like... It's not challenging, it just takes a bit more time but it's not hard 🙄
@@JR-mk6ow true dat, asynchronous stuff has always been more challenging than pure dynamic code.... tho, in comparison against whats out there, web development has always been kind of "baby programming" for me... if you want to challenge yourself, go for functional languages and math heavy programming like game engines, audio programming and so on... for free time there are also esoteric langs, to get to know your limits :)
@@911madza really? I did some websites with Django and SPA apps with React and Vue. I have to say SPA is much more fun to do. I also prefer the fact the backend is totally separated from the frontend with microservice type of architecture
Great explanation bro. Put the perspective straight. Kudos.
I must rebuild one static web site for rental, which have good SEO, when I make it dynamic will I lost popularity and how much ? What is better to be done in my case??
I am new in web development, so if I make Single Page Application, I just need to connect it to Restful API from backend. am I right ?
For static websites, why can't we just use javascript to fetch data from backend api and use dom manipulation to update the page? In this way we achieve the same result as dynamic websites, but with isolated front end and back end. Is this a common use case?
This is exactly what I’m doing with the current project I’m working on. Being a long-time “old-school” developer with stacks like ASP/SQL server and Php/MySQL, I made the effort to learn React and Vue, and even started rewriting the application with the framework.
I finally came to the conclusion that it introduced as many issues as it solved, and was a headache. Most of the site now is php/MySQL, and there are one or two pages which benefit from SPA-like functionality (what we used to call DHTML). I simply execute JavaScript fetches on that page, and update dynamically and manipulate the DOM. There really is no need for an entire JavaScript framework.
SPAs are just du-jour right now. Most of the time, you don’t need a mallet to crack a nut.
Good overview in less time!
It will geat if provide some link of active website/dummy pages for all kinds.
Spa is also to move charge from server to Client... That one main raison to do spa
Hello, as far as I know React is used mostly for SPA. I m curious what developers use mostly for multi page apps. What are the most popular choices? I know that with Node JS you can use some template engines to make pages dynamic. Can you tell me most popular choices for multi page applications? I know that SPAS are a thing right now and almost everything is built that way but I was curious about multi page apps too.
prefect explanation
Can you upload a video about why you don't love PHP?
What a great insight this video gave to me! Thanks for sharing it, learned a lot!
Thank YOU for your awesome feedback!
with static sites you dont have to worry about security, backing the database, patching the code when there is a new hack exploit, etc. and it costs less.
i made a single page e-shop with js and php but it is a 3500 line nightmare that works like a charm.
Thank you, this was super informative and clear!
Thank u for this awesome video
I want to build a personal portfolio with 3 sections (home, projects, about), and whenever the user clicks on one of those sections, the content currently displayed on the page fades out, then the new content fades in. To achieve this, which type of website should I approach?
The answer is SPA.
Great explanation. Thx
you are incredible. thank you.
You're the man Max! I was wondering what kind of hobbies do you have? Are you into music or fitness or cooking, or what?
I do indeed love cooking, besides that a bit of sports, a bit of gaming, nature and enjoying the city
Danke vielmals! Der Hammer. Great English, how did you learn? I'm a web dev and TEFL cert holder and love languages and learning them. Always interested in how people get involved in other speaking other tongues.
Ich wusste dass er Deutsch spricht.
Thank you, that was really good explanation. you rock ;)
Thanks so much for this fantastic feedback Marius!
Web browsers and http was never supposed to be an "app". If you want an "app" experience, download it from the play store or install it on your computer.
So things never change?
@@academind Barely. 95% of websites are traditional multi-page, server-rendered applications. And mobile app market is growing daily. Web will never have native (mobile and desktop) applications.
How do we clone your drive, knowledge and teaching skill? Wow!!
As I watch your output I wonder about the organization you've built. I would hope you have a consulting/product division running too. Your udemy support people are superb! So you don't have a problem selecting and delegating in such an enterprise.
Wow, thanks so much! That's really amazing to hear! :)
Currently, I got no consulting plans though - I just love coding and creating tutorials/ demos etc
Great content brother....Thank you!
So is a blazor web app or Angular web app without a dedicated server a SPA?
Max would be awesome if you could release a crash course or something on Gatsby
No plans to create such a course at the moment, but definitely on the "ideas" list so we'll see :)
what about deploying a node app that executes a client (React application)? is that a a bad practice? I used this approach for manage an office 365 authentication in multiple resources (client auth, adal, API).
Absolutely amazing!
Excellent. Lots of love from INDIA
Great summary. Subscribed.
Great explanation
This was really very helpful!
very nice and simple explanation 👍
The concept of Dynamic Website you gave it's the same of what they call 'server side rendering', which is confusing. What's the difference?
What about for blogs or sites like indeed with article type of content?
Thank you)
Thank you soo very much!!
thanks.
Love these videos!
You are the Best Teacher!
Maxi
Thank you Mohsin :)
Hi, already I have an app with integrated angular and nodejs run on the same server. How can I do server side rendering of angular in this existing Integrated approach by using angular universal?
You can use Pug template engine that goes great with NodeJs for server side rendering and forget about angular.
Great video, thanks
Great video!!
I have a question,how control more content in single websites?
So please can we harness the advantages in all of them so that we can get a perfect website with no downsides or we have to choose only one for a particular project??
thanks bro
Awesome content!
Hello , Which best for build search engine ?
Never been convinced by SPA's. For 99% of cases they aren't necessary and you end up just re-implementing browser functionality in a more buggy and less secure way.
i agree.
Are multipage applications categorised as dynamic web app ?
Very Good :) , but what about making a series or a video about elasticSearch or elastic stack? :)
So, if you want to build your or anyone else's portfolio/personal site, what would you use?
Would you still go the SPA way? (that's what I'm trying to do)
static would be fine.
thanks
You never disappoint me!
you are the best sir
You don't talk of cache system for dynamic system to make '' static site'' or universal render (ssr+ csr)
Hey.. max pls would you do a tutorial on AWS ?
I do have AWS content already :) => academind.com/learn/aws/
Does a course on this, please plenty show basic of language but not how they come together
Amazing 💎
Amazing explanation!!! 😘😘
Thank you Akash!!
mixing dynamic page with ajax for CRUD operations that only updating that page
the problem is just when I want to make PWA..
Liked before watching video.
Amazing video
I personally prefer to use turbolinks instead of spa if the app is not a cross platform.
Thank you for talking about SEO issues with SPA.
I got confused at 6:53, when you mentioned "the cloud".
air max so pretty
Please answer this question, which one of Angular, React and Vue you personally prefer
I tried my best to answer that question in this video/article => academind.com/learn/angular/angular-vs-react-vs-vue-my-thoughts/
@@academind
Wow. Such a detailed information on all three.
Appreciate. 👍🏻
can you make a course on wodpress + Angular?
your saying what about the web page ?
completely forgot seeing your air max behind u 😍😍
:D
sir..Which technology you built your 'Academind' website in?
Nuxt
That's correct, we used Nuxt, but I found Gatsby pretty interesting so we switched to it some months ago :)
Where can I buy that jumper?
Only available for us, we don't offer any merchandise (yet), sorry :/
SPA! ♨
As long as you make a real native app, it doesn't matter if your website is dynamic, static or a single page. Use whatever works best.
Just don't go confusing websites and apps. Or worse, try to make a PWA.
You do not plan to update the course on nuxt)))?
The course actually is up-to-date, not sure what update you're referring to here?
@@academind there was a nuxt update, I did not receive notifications with udemy. decided that this course is not supported. sorry if not right)
Make a Course on MEAN stack i desperately need to learn MEAN Stack MAx Plzzzzz
I think I got you covered here ;) => www.udemy.com/angular-2-and-nodejs-the-practical-guide/?couponCode=ACAD_W
I spent most of the video staring at the nike air's
Max, why do you put your shoes on shelves?
I think it looks cool and I like my shoes, that's it actually ;)
@@academind and you avoid crawling spiders slipping into them 😂
@@academind ah, so the pattern is "wear shoes > walk > get shoes off > wash shoes > put on shelf" - kinda time consuming, but to each one's own :)
Gatsby course.
No homo but i do wanna give max a big kiss for all his work in teaching us noobs
Max do you think RoR still has a future? With the release of Rails 6, and the new features included.