Dynamic Websites vs Static Pages vs Single Page Apps (SPAs)

[@academind]

Which kind of web pages have you built already? What was most fun?

[@vaheghevondyan9437]

Hi Max, I created SPAs via React. It was most fun.

[@MegaCristisan]

SPA (including OpenId and OAuth2) with React/Angular and Lumen

[@aminghost1970]

Both static and SPAs, the latter im now having fun building with react

[@vladislavbarbarii2089]

@@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

[@alexandros-markovits]

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.

[@TraversyMedia]

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 :)

[@logicstv]

This is a really needed video, especially for those coming from the oldest approach.

[@academind]

Thanks so much Brad! And yeah, started wearing them a few months ago and got into collecting them (kind of...)

[@TheInphinion]

My two favorite instructors, Brad and Max!

[@michakowalewski5409]

@@TheInphinion true that! I had the same idea when I read Brad's comment. Both channels are awesome!

[@MohammedIqlasUddin]

Two of the greatest educators on KZbin

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.

[@jhonasn]

Perfect, that was exactly what I was looking for to show to some begginers in web dev world. Thank you very much!

[@vasilisplavos]

Static Pages for the main website Dynamic Website for Blogs, Forums etc Single Page Apps for Tools, Applications etc

[@juhavehnia7862]

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.

[@jean4j_]

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.

[@myticas]

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.

[@johnmathew8543]

I searched many videos for this topic, so far this is the best explanation I found on KZbin

[@gianlucazin36]

I come back to this video every now and then to make order into my mind, you are a hero!

[@gilmoretj]

Another challenge for SPA's can be accessibility. Audio browsers can find it difficult on detect browser generated content.

[@DogmaKrone]

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 :)

[@academind]

Awesome to read that the video was helpful for you! Thanks for your great feedback, I also wish you a nice day :)

[@julianz.5316]

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. ;)

[@learnwithlaura3]

Thank you for a great explanation! I´ve been trying to figure out the differences for months. I also like the new background.

[@academind]

Thanks a lot for your awesome feedback Laura!

[@doubledouble3454]

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.

[@stuart1969]

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. 👍

[@academind]

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.

[@valeriofunk5000]

i made a single page e-shop with js and php but it is a 3500 line nightmare that works like a charm.

[@911madza]

although SPA is where its at in 2019, dynamic sites are much more fun to build (especially if you are specialized in back-end)

[@JR-mk6ow]

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 🙄

[@911madza]

@@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 :)

[@jean4j_]

@@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

[@nelzkie777]

Ah got it. I was confused about this sever side rendered and client side rendered. Your explanation is really good. Thanks.

[@alind9947]

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.

[@alexmalikov924]

Amazing Video Max!! You are great explaining!! What about using Nuxt JS for solving problem with SEO?

[@academind]

Thank you so much! Sure, Nuxt.js is decent for that - you can build both a SSR and pre-rendered (static) site with it

[@RahulRoy-id5yf]

This video really filled a lot of knowledge gaps that i had regarding web development

[@georgesmith3022]

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.

[@martinlionel7487]

Spa is also to move charge from server to Client... That one main raison to do spa

[@Advertisingvideos]

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??

[@MuhammadHamza-uh1lu]

Great explanation bro. Put the perspective straight. Kudos.

[@shawnli7814]

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?

[@AlanHearnshaw]

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.

[@ismayilmammadli2554]

Can you upload a video about why you don't love PHP?

[@ajiteshrajan127]

Good overview in less time! It will geat if provide some link of active website/dummy pages for all kinds.

[@rodgwr]

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?

[@leonelnascimento5078]

The answer is SPA.

[@Capatron1]

What a great insight this video gave to me! Thanks for sharing it, learned a lot!

[@academind]

Thank YOU for your awesome feedback!

[@agung_laksana]

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 ?

[@EduardKaresli]

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)

[@hector3dev]

static would be fine.

[@victormendoza3295]

What about for blogs or sites like indeed with article type of content?

[@felixem17]

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).

[@drakZes]

So is a blazor web app or Angular web app without a dedicated server a SPA?

[@mikojan85channel]

I got confused at 6:53, when you mentioned "the cloud".

[@howwasthat3505]

You are the Best Teacher! Maxi

[@academind]

Thank you Mohsin :)

[@dean6046]

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?

[@academind]

I do indeed love cooking, besides that a bit of sports, a bit of gaming, nature and enjoying the city

[@cliffordowusu5344]

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??

[@w_ulf]

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.

[@zachfenton608]

Ich wusste dass er Deutsch spricht.

[@manojthakur-vk8lp]

Excellent. Lots of love from INDIA

[@HarshitSharma-ir3ls]

Great content brother....Thank you!

[@astroboyhasguns]

Great summary. Subscribed.

[@azizkosber5767]

Thank you, this was super informative and clear!

[@TheDebarghya09]

This was really very helpful!

[@graficandorealidades7561]

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?

[@nagarajanganesan2726]

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?

[@hector3dev]

You can use Pug template engine that goes great with NodeJs for server side rendering and forget about angular.

[@davidbasil2727]

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]

So things never change?

[@davidbasil2727]

@@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.

[@RFranks]

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.

[@hector3dev]

i agree.

[@faizullahmohammadi4904]

I have a question,how control more content in single websites?

[@highjumpdev3692]

You never disappoint me!

[@kokizzu]

mixing dynamic page with ajax for CRUD operations that only updating that page the problem is just when I want to make PWA..

[@martinlionel7487]

You don't talk of cache system for dynamic system to make '' static site'' or universal render (ssr+ csr)

[@tasnimelmoghrbi]

Hello , Which best for build search engine ?

[@chandinirs]

Are multipage applications categorised as dynamic web app ?

[@kunalgupta116]

very nice and simple explanation 👍

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@feranmiafrica9528]

Hey.. max pls would you do a tutorial on AWS ?

[@academind]

I do have AWS content already :) => academind.com/learn/aws/

[@GeorgeMonsour]

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.

[@academind]

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

[@Deliverant]

Max would be awesome if you could release a crash course or something on Gatsby

[@academind]

No plans to create such a course at the moment, but definitely on the "ideas" list so we'll see :)

[@ayub8457]

I personally prefer to use turbolinks instead of spa if the app is not a cross platform.

[@ImmaterialDigression]

Love these videos!

[@RishabhJain-uv7zj]

Absolutely amazing!

[@akshattamrakar9071]

Please answer this question, which one of Angular, React and Vue you personally prefer

[@academind]

I tried my best to answer that question in this video/article => academind.com/learn/angular/angular-vs-react-vs-vue-my-thoughts/

[@VirendraBG]

@@academind Wow. Such a detailed information on all three. Appreciate. 👍🏻

[@surendrajat7290]

prefect explanation

[@Marius752]

Thank you, that was really good explanation. you rock ;)

[@academind]

Thanks so much for this fantastic feedback Marius!

[@constantinegamers]

can you make a course on wodpress + Angular?

[@shaneblackwoodGodbless]

Does a course on this, please plenty show basic of language but not how they come together

[@StijnHommes]

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.

[@akashtakawale9074]

Amazing explanation!!! 😘😘

[@academind]

Thank you Akash!!

[@ChauNguyen-jm5ij]

Awesome content!

[@rustemibragimov1108]

You do not plan to update the course on nuxt)))?

[@academind]

The course actually is up-to-date, not sure what update you're referring to here?

[@rustemibragimov1108]

@@academind there was a nuxt update, I did not receive notifications with udemy. decided that this course is not supported. sorry if not right)

[@vinaykumar-qe4zx]

sir..Which technology you built your 'Academind' website in?

[@임창수-c7c]

Nuxt

[@academind]

That's correct, we used Nuxt, but I found Gatsby pretty interesting so we switched to it some months ago :)

[@Kicknee]

Great explanation. Thx

[@tamannasain7453]

Great video!!

[@mohamedaminebejaoui1376]

Very Good :) , but what about making a series or a video about elasticSearch or elastic stack? :)

[@harelwahnich3447]

you are incredible. thank you.

[@VinothKumar5403]

Liked before watching video.

[@limpep]

Where can I buy that jumper?

[@academind]

Only available for us, we don't offer any merchandise (yet), sorry :/

[@miles611]

Great explanation

[@bensonwu8]

Great video, thanks

[@vedantpatel3589]

your saying what about the web page ? completely forgot seeing your air max behind u 😍😍

[@academind]

:D

[@awaisraza2285]

Make a Course on MEAN stack i desperately need to learn MEAN Stack MAx Plzzzzz

[@academind]

I think I got you covered here ;) => www.udemy.com/angular-2-and-nodejs-the-practical-guide/?couponCode=ACAD_W

[@nikhilgoyal007]

Thank you soo very much!!

[@PhilipAlexanderHassialis]

Max, why do you put your shoes on shelves?

[@academind]

I think it looks cool and I like my shoes, that's it actually ;)

[@EduardKaresli]

@@academind and you avoid crawling spiders slipping into them 😂

[@PhilipAlexanderHassialis]

@@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 :)

[@rouagabderrazak1298]

Thank you for talking about SEO issues with SPA.

[@hassantariq8847]

Amazing 💎

[@shnthekid4093]

you are the best sir

[@AZ-rg3rf]

I spent most of the video staring at the nike air's

[@akashbond862]

Amazing video

[@danielbennett1192]

No homo but i do wanna give max a big kiss for all his work in teaching us noobs

[@adante407]

Max do you think RoR still has a future? With the release of Rails 6, and the new features included.

[@2016joyce]

air max so pretty

[@heyyy4987]

Gatsby course.

[@zahramahdavi9448]

Thank you)

[@ramyokasha3092]

thanks bro

[@A-and-M]

thanks

[@mirazking7694]

SPA! ♨

[@hakimamerzaie9332]

thanks.