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

Подписаться 911 тыс.

Просмотров 143 тыс.

50% 1

Should you only build SPAs? Why might dynamic pages be better? And there even is a third option!
Join the full "React.js - The Complete Guide" course at 90% off: acad.link/reactjs
Exclusive discount also available for our "Node.js - The Complete Guide" course: acad.link/nodejs
Also read the full article: www.academind.com/learn/web-d...
Check out all our other courses: academind.com/learn/our-courses
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Наука

Опубликовано:

4 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 174

@academind 5 лет назад

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

@vaheghevondyan9437 5 лет назад

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

@MegaCristisan 5 лет назад

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

@aminghost1970 5 лет назад

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

@vladislavbarbarii2089 5 лет назад

@@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 5 лет назад

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 5 лет назад

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 5 лет назад

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

@academind 5 лет назад

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

@TheInphinion 5 лет назад

My two favorite instructors, Brad and Max!

@michakowalewski5409 5 лет назад

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

@MohammedIqlasUddin 5 лет назад

Two of the greatest educators on RU-vid

3 года назад

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 3 года назад

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

@johnmathew8543 3 года назад

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

@gianlucazin36 3 года назад

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

@vasilisplavos 5 лет назад

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

@nelzkie777 3 года назад

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

@juhavehnia7862 3 года назад

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.

@learnwithlaura3 5 лет назад

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

@academind 5 лет назад

Thanks a lot for your awesome feedback Laura!

@jean4j_ 4 года назад

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.

@MuhammadHamza-uh1lu Год назад

Great explanation bro. Put the perspective straight. Kudos.

@azizkosber5767 3 года назад

Thank you, this was super informative and clear!

@Capatron1 5 лет назад

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

@academind 5 лет назад

Thank YOU for your awesome feedback!

@myticas 2 года назад

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.

@ajiteshrajan127 5 лет назад

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

@alexmalikov924 5 лет назад

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

@academind 5 лет назад

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 11 месяцев назад

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

@gilmoretj 5 лет назад

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

@DogmaKrone 5 лет назад

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 5 лет назад

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

@doubledouble3454 5 лет назад

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 5 лет назад

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 5 лет назад

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.

@martinlionel7487 5 лет назад

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

@ImmaterialDigression 5 лет назад

Love these videos!

@TheDebarghya09 3 года назад

This was really very helpful!

@HarshitSharma-ir3ls 2 года назад

Great content brother....Thank you!

@AbhishekKumar-mq1tt 5 лет назад

Thank u for this awesome video

@julianz.5316 5 лет назад

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

@astroboyhasguns 3 года назад

Great summary. Subscribed.

@RishabhJain-uv7zj 2 года назад

Absolutely amazing!

@Kicknee Год назад

Great explanation. Thx

@highjumpdev3692 4 года назад

You never disappoint me!

@kunalgupta116 3 года назад

very nice and simple explanation 👍

@Advertisingvideos 4 года назад

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

@alind9947 5 лет назад

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.

@surendrajat7290 2 года назад

prefect explanation

@ChauNguyen-jm5ij 5 лет назад

Awesome content!

@dean6046 5 лет назад

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 5 лет назад

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

@nikhilgoyal007 3 года назад

Thank you soo very much!!

@harelwahnich3447 Год назад

you are incredible. thank you.

@Marius752 5 лет назад

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

@academind 5 лет назад

Thanks so much for this fantastic feedback Marius!

@miles611 2 года назад

Great explanation

@bensonwu8 3 года назад

Great video, thanks

@howwasthat3505 5 лет назад

You are the Best Teacher! Maxi

@academind 5 лет назад

Thank you Mohsin :)

@agung_laksana 4 года назад

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 ?

@tamannasain7453 2 года назад

Great video!!

@felixem17 4 года назад

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

@manojthakur-vk8lp 4 года назад

Excellent. Lots of love from INDIA

@tasnimelmoghrbi 5 лет назад

Hello , Which best for build search engine ?

@hassantariq8847 5 лет назад

Amazing 💎

@akashtakawale9074 5 лет назад

Amazing explanation!!! 😘😘

@academind 5 лет назад

Thank you Akash!!

@valeriofunk5000 3 года назад

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

@w_ulf 4 года назад

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 3 года назад

Ich wusste dass er Deutsch spricht.

@zahramahdavi9448 Год назад

Thank you)

@A-and-M 4 года назад

thanks

@VinothKumar5403 5 лет назад

Liked before watching video.

@ramyokasha3092 3 года назад

thanks bro

@ismayilmammadli2554 5 лет назад

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

@ChiragModichiragmodi 5 лет назад

can you make a course on wodpress + Angular?

@victormendoza3295 Год назад

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

@hakimamerzaie9332 2 года назад

thanks.

@nagarajanganesan2726 3 года назад

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.

@martinlionel7487 5 лет назад

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

@rouagabderrazak1298 Год назад

Thank you for talking about SEO issues with SPA.

@faizullahmohammadi4904 4 года назад

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

@cliffordowusu5344 4 года назад

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

@GeorgeMonsour 5 лет назад

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 5 лет назад

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

@akashbond862 5 лет назад

Amazing video

@Deliverant 5 лет назад

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

@academind 5 лет назад

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

@drakZes 2 года назад

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

@EduardKaresli 5 лет назад

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.

@shnthekid4093 3 года назад

you are the best sir

@shaneblackwoodGodbless 5 лет назад

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

@rodgwr 2 года назад

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.

@feranmiafrica9528 5 лет назад

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

@academind 5 лет назад

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

@chandinirs 3 года назад

Are multipage applications categorised as dynamic web app ?

@georgesmith3022 5 лет назад

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.

@mohamedaminebejaoui1376 5 лет назад

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

@kokizzu 5 лет назад

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

@shawnli7814 2 года назад

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 2 года назад

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.

@mikojan85channel 3 года назад

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

@ayub8457 5 лет назад

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

@akshattamrakar9071 5 лет назад

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

@academind 5 лет назад

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

@VirendraBG 2 года назад

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

@vinaykumar-qe4zx 5 лет назад

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

@user-fh4xo2pc2d 5 лет назад

Nuxt

@academind 5 лет назад

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

@limpep 5 лет назад

Where can I buy that jumper?

@academind 5 лет назад

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

@vedantpatel3589 5 лет назад

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

@academind 5 лет назад

@graficandorealidades7561 2 года назад

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?

@rustemibragimov1108 5 лет назад

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

@academind 5 лет назад

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

@rustemibragimov1108 5 лет назад

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

@awaisraza2285 5 лет назад

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

@academind 5 лет назад

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

@heyyy4987 5 лет назад

Gatsby course.

@2016joyce 3 года назад

air max so pretty

@sobeidalagrange7129 5 лет назад

😎

@RFranks 3 года назад

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.

@razvacos7469 5 лет назад

Laravel and Django can't be compared with express. js maybe with Adonis. js as node.js framework

@user-fh4xo2pc2d 5 лет назад

Adonisjs is awesome. I hope it becomes more popular.

@PhilipAlexanderHassialis 5 лет назад

Max, why do you put your shoes on shelves?

@academind 5 лет назад

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

@EduardKaresli 5 лет назад

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

@PhilipAlexanderHassialis 5 лет назад

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

@danielbennett1192 4 года назад

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

@StijnHommes 2 года назад

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.

@adante407 5 лет назад

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

@davidbasil2727 5 лет назад

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 5 лет назад

So things never change?

@davidbasil2727 5 лет назад

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