in this video you hosted your app on Netlify but you changed later. Can you tell us what you didnt like? im using netlify but its more expensive than AWS.
Is this because of reacts new features? I feel like all these points are still for what the same no? I see react has a new server rendering thing but still can you elaborate?
Let me tell you that your explanation is breif and very clear. I have been reading the last couple of days about this, trying to get a simple answer, but still wasn't clear on the main differences. Thanks, for the video, it was just what I needed.
This was a very helpful video, thank you so much. I mainly develop static/dynamic websites, some of them are just informative pages with a form and in other cases is a website with some data from a database, The thing is that SEO is really important in all the websites I build in my job and I really like React so I was struggling how to solve that problem or what was the best approach for it. And this video solves everything for me. Thank you so much.
@6:59 print screen -> print -> stick on the wall -> underline with red pencil yes and no -> good to go :D .. in shortcut learn all of them. This video is super clear super explanatory. "Like" deserved, subscribed. This should have more than 14k views. For this author deserves money from youtube than most of the "crappy" vlogs of should I learn from unnamed sources
I just recently discovered your channel. Already learned a lot. Great video. I have been studying JavaScript and React for a while and just recently started exploring Gatsby and Next JS. Now I know when to use what. Lol. My solution for a while was to always use Create React App and firebase. Now exploring Gatsby and GraphQL.
absolutely amazing I like the explanation as junior developer and just started my first job, I was wondering which one to choose for my frontend. NextJs is my way to go since my site will be constantly update. thanks.
Thank you. Great video, very well explained with the helpful use of the decision graphics. I was thinking through a similar comparison in my head just last night. This video provides the answer as well as some additional insights as to when to favor picking one of these tools over another
We were just looking at some alternatives to traditional CMS stacks. CRA got used on one project. Next.js and GatsbyJS seemed like good fits for a couple of other site rewrites. I'm leaning towards GatsbyJS since it can adopt a hybrid static site + dynamic client-side content approach.
@@AntonioBrandao This is one of the few videos I could find on the topic. th-cam.com/video/hC9vVZKLKaw/w-d-xo.html All I could get on the Gatsby site was a link to some Webinar with no date. Maybe the Webinar is pre-recorded and it's just a way to get your email address. www.gatsbyjs.com/build-web-apps-webinar/
Keep in mind that while Gatsby is "sold" as a static site generator, it supports a hybrid between static and server side rendering. The only real difference between the two is the developer experience when it comes to configuration and development.
So, this isn't exactly the case. Gatsby is in fact 100% static in output -- it does not support running a custom server in production at all. For example, if you have an app like twitter and you need profile pages for your users, with gatsby, each time you had a new user, you would need to rebuild the site to add the profile page for that user. With a true server-rendered setup, you would not need a rebuild, as the server would compile your page on demand.
@@JeffEscalante It looks like having a login experience is possible. They have a section on it here: www.gatsbyjs.org/docs/building-apps-with-gatsby/#client-only-routes--user-authentication
@@mmmmaurer Yes but the twitter profile page has SEO I assume, while client routes not. Its approach is like a hybrid of SSG and CRA I think. No SSR there.
The reason why SPA is worse for SEO is because even though Google can crawl JS, it uses a different crawler and it crawls less frequently. The main googlebot still just requests HTML. If it doesn't see content but sees JS, it'll recrawl using the JS crawler. So it takes longer to get into the index and crawls happen less frequently.
HI, thank you for your excelent video. I am kinda confused..What about Headless CMS? Where are they included in this question about what to use. THanks!
Can you explain what does it mean that CRA is not SEO friendly? AFAIK you serve HTML from it so robots shouldn't have problems crawling it? I don't get it.
I can recommend Gatsby + netlifyCms if you need a cms. NetlifyCms is a cms that lives IN your static site and uses github commits under the hood to add posts and changes
I was in your shoes recently. I chose Gatsby. Not because it's “better”, it's just faster to get something done because of their *convention over configuration* style. E.g. you get image transformations out of the box. It also couldn’t be easier to deploy it (especially on Netlify). Gatsby is opinionated, but only in the right places (imo). You can, of course, custom-configure it as you wish. The only thing they really 'force' upon you is GraphQL (which I welcome). For Portfolios/Agency websites, and blogs Gatsby is just perfect (but not limited to).
If your site is largely static content but you need to geolocate based on client ip/location (not using the navigator api) something like Next is nice since you have access to the full set of request data and you can also render static pages.
What if you have a site that has lots of updating and sharing, but all of that happens inside authenticated areas, therefore not really visible to search bots. Would Gatsby be the better choice there over Next.JS? Like, I'd want my landing page and registration and contact pages all SEO'd, but those are relatively static, and the dynamic stuff happens behind the login.
Thanks Ben. Very helpful info. Much appreciated. Any thoughts on the best way to add specific head>meta tags for a Gatsby site in order to improve SEO on individual pages?
TechStacker, if real-time SEO is less important than development cost/experience, then you might want to choose Gatsby even for the Reddit clone. The Prisma backend is ideal in this case.
Hello Ben, do you have any recomemndations (maybe a video) about what server hosting to use in order to store a react app (app) + nodejs (backend), I know there are tons but I'd like to hear your recomendations. Thanks
I'm thinking to move application to gatsby where data is flows from backend database through my API layer. The data is frequently updated into SQL DB. The front end site content is all dynamic. Do you think usage of gatsby here will be suitable or should I use NextJs
If your using a non-graphql API with Gatsby the response is cached (using gatsby-node.js) developing in local is a pain if you need to update that values.
Hey - I love your presentations! need your help!!! We are using react-static but not seeing content in view page source as per route url. And route urls not showing in google result. We are planning migration from React-Static to Gtsby for best SEO result. Can you share me your inputs for best approach for SEO. Thanuks much in advance!
This explanation is really good even for normal people (no coders 😅)... a friend who is feeling bad because he doesn’t know how to make it work RSS feed api for podcasts, he said he tried to make it work with Graphql but nothing... wise coder, what are your recommendations?? Pleasee
I think you should see preact it's quite easy and super light SSR PWA and all the goodness 3kb and it's literally react. I like Next and Gatsby both it's a Toss up, honestly I don't like Gatsby using graphql, just not a fan. I thought nextjs by zeit is easy without even using SSR. CRA is totally custom where two other are semi ready, especially Gatsby w/starter templates. Yet I agree on 95% of your thoughts. Last, preact-compat makes everything react work with preact.
What!!! You said when don't want a public facing website or user to log in, use create-react-app? How come? I sign in my users on CRA. Can you clarify your statement please?
You should've mentioned the fact that customizing CRA is much worse than next / gatsby as you have to eject. (Say adding SASS support / modifying your .babelrc / webpack config)
You can also use Parcel (and create parcel app) which is zero configuration out of the box and adding common libraries such as SASS and LESS is quite easy compared to web-pack.
@@bawad I would say that as long as you are using common JavaScript libraries/frameworks(TS, React, Vue, JS, etc) and are building for the browser , yes. I know they are being ambitious and supporting builds for languages like Kotlin and I would steer clear there. I know a company with a heavy duty financial comparison/aggregator site using it and they seem to be a fan. But again, I think for more common use cases it should be fine.
Is this opinion still valid? I'm searching about Next.js or Gatsby and saw that Next.js can be used as static page generator also... Trying to figure out wich is best for a website that needs both... static content (like main page, landing pages, a blog posts), but also has a dinamic generated content at Client Side Rendering (input a field, call a Lambda Function, and render a table with the response)... Shoud be the landing page for this tool here: ctools.com.br
Basically always use next js if SEO is important and data changes often (so 90%of cases - e-commerce websites, business websites, blogs ).. For portfolio site you can use cra
What about a property listings website such as airbnb? Is next js better or create react app more suitable? I feel that data (property listings) change quite frequently so i guess nextjs is d better choice?
Here's a more technical explanation I just saw on Twitter: developers.google.com/web/updates/2019/02/rendering-on-the-web
Specifically this graphic: developers.google.com/web/updates/2019/02/rendering-on-the-web#wrapup
in this video you hosted your app on Netlify but you changed later. Can you tell us what you didnt like? im using netlify but its more expensive than AWS.
I'm still using Netlify
I'd love to hear what your thoughts are on CRA vs Gatsby vs Next in 2021.
Is this because of reacts new features? I feel like all these points are still for what the same no? I see react has a new server rendering thing but still can you elaborate?
10 seconds on the video and i want to watch it entirely, good start
thanks
Let me tell you that your explanation is breif and very clear. I have been reading the last couple of days about this, trying to get a simple answer, but still wasn't clear on the main differences. Thanks, for the video, it was just what I needed.
This was a very helpful video, thank you so much. I mainly develop static/dynamic websites, some of them are just informative pages with a form and in other cases is a website with some data from a database, The thing is that SEO is really important in all the websites I build in my job and I really like React so I was struggling how to solve that problem or what was the best approach for it. And this video solves everything for me.
Thank you so much.
@6:59 print screen -> print -> stick on the wall -> underline with red pencil yes and no -> good to go :D .. in shortcut learn all of them. This video is super clear super explanatory. "Like" deserved, subscribed. This should have more than 14k views. For this author deserves money from youtube than most of the "crappy" vlogs of should I learn from unnamed sources
haha thanks :)
I just recently discovered your channel. Already learned a lot.
Great video. I have been studying JavaScript and React for a while and just recently started exploring Gatsby and Next JS.
Now I know when to use what. Lol. My solution for a while was to always use Create React App and firebase.
Now exploring Gatsby and GraphQL.
Thanks for the simple explanation. I was struggling to wrap my head around this
Thank you! Now I need to learn next js!
absolutely amazing
I like the explanation
as junior developer and just started my first job, I was wondering which one to choose for my frontend.
NextJs is my way to go since my site will be constantly update.
thanks.
I really appreciate the breakdown here. It was so hard to find a clear answer. Just subscribed. Looking forward to learning more.
welcome :)
We selected next.js for SEO and dynamic content reasons over Gatsvy or SPA(react). good video as usual!
thanks ben! im currently deciding which one to use for my blog.
Thanks for this video Ben, great for visual learners. The flowchart is a keeper, I saved it in my Evernote plus a link to this vid. Best wishes
Thank you. Great video, very well explained with the helpful use of the decision graphics. I was thinking through a similar comparison in my head just last night. This video provides the answer as well as some additional insights as to when to favor picking one of these tools over another
We were just looking at some alternatives to traditional CMS stacks. CRA got used on one project. Next.js and GatsbyJS seemed like good fits for a couple of other site rewrites. I'm leaning towards GatsbyJS since it can adopt a hybrid static site + dynamic client-side content approach.
Gatsby is quite good man, like the host says with fewer updates, like a blog is great
Can you provide a link to info on that hybrid approach? Can't find it on their docs.
@@AntonioBrandao This is one of the few videos I could find on the topic. th-cam.com/video/hC9vVZKLKaw/w-d-xo.html
All I could get on the Gatsby site was a link to some Webinar with no date. Maybe the Webinar is pre-recorded and it's just a way to get your email address. www.gatsbyjs.com/build-web-apps-webinar/
Nicely done Ben. I pretty much follow the same rule. Gatsby can add few more cents like Critical Rendering, Progressive Image loading etc.
thanks a lot for the clarifications between those frameworks, really helped me a lot
Excellent analysis. Good to see JAMstack is gaining some popularity.
Thanks ben for d excellent video again. I was pondering the same thing this week. I agree with your assessment
Thank you Ben, this is a great entry point for choosing which platform is good for a new project
Keep in mind that while Gatsby is "sold" as a static site generator, it supports a hybrid between static and server side rendering. The only real difference between the two is the developer experience when it comes to configuration and development.
So, this isn't exactly the case. Gatsby is in fact 100% static in output -- it does not support running a custom server in production at all. For example, if you have an app like twitter and you need profile pages for your users, with gatsby, each time you had a new user, you would need to rebuild the site to add the profile page for that user. With a true server-rendered setup, you would not need a rebuild, as the server would compile your page on demand.
@@JeffEscalante It looks like having a login experience is possible. They have a section on it here: www.gatsbyjs.org/docs/building-apps-with-gatsby/#client-only-routes--user-authentication
@@mmmmaurer Yes but the twitter profile page has SEO I assume, while client routes not. Its approach is like a hybrid of SSG and CRA I think. No SSR there.
Next can generate static pages (like Gatsby) as well.
why use a server for static pages .....
It can actually not using the server. You can host the static file like GatsbyJS too.
Hey Ben, great explanation, I really appreciated it.
concise and to the point explanation, thank you!
helps me get a sense of how gatsby works. i do not have any experience with gatsby.
Thanks Ben. That was super clear and to the point. Just like React.
Thanks for the awesome clarification!
did you try serverless next js?
Just what I was looking for in a comparison, thank you sir.
I want at least 10 new frameworks a week to learn.
Super Helpful. Thanks Ben!
The reason why SPA is worse for SEO is because even though Google can crawl JS, it uses a different crawler and it crawls less frequently. The main googlebot still just requests HTML. If it doesn't see content but sees JS, it'll recrawl using the JS crawler. So it takes longer to get into the index and crawls happen less frequently.
Now as things have changed, we expect an updated video from you on this so that we don't miss anything before heading to the stars. 😉
One of the best programming videos.
Nice video. I've found myself picking the wrong one and then switching sometimes, I think in the end I came up with pretty similar criteria.
Awesome graphical explanation sir.. thanks
Excellent. I wish I found this before I built my site before.
Hey Ben.. Nice video again. Also wanted to ask you, what are your opinions about JAM stack?
Exactly the video I was looking for ! :)
Thanks for going through this. For Gatsby, do you have to worry about the storage size for the statically generated blog articles?
Thanks for clearing things up! That was really helpful.
HI, thank you for your excelent video. I am kinda confused..What about Headless CMS? Where are they included in this question about what to use. THanks!
Thanks, Ben, You explained it well
Thanks Ben! Fair and unbiased comparison.
Dang!! This is an excellent video!
Thanx, Ben!
Pretty good explanation. The decision factors are clear, 👍
Thank you man! I am going to set up a blog, your video was on point! Thanks.
hows the blog going?
@@darshandhabale143 never made one. i went busy 🙈. will let you know when i do :)
@@ns4k_tv Oh alright
Can you explain what does it mean that CRA is not SEO friendly? AFAIK you serve HTML from it so robots shouldn't have problems crawling it? I don't get it.
CRA is not SEO friendly because it renders a blank HTML page then uses javascript to render the "real" HTML
Very clear, thanks for the learning
Thanks for this... working on this decision for a portfolio site.
I can recommend Gatsby + netlifyCms if you need a cms. NetlifyCms is a cms that lives IN your static site and uses github commits under the hood to add posts and changes
I was in your shoes recently. I chose Gatsby. Not because it's “better”, it's just faster to get something done because of their *convention over configuration* style. E.g. you get image transformations out of the box. It also couldn’t be easier to deploy it (especially on Netlify).
Gatsby is opinionated, but only in the right places (imo). You can, of course, custom-configure it as you wish. The only thing they really 'force' upon you is GraphQL (which I welcome).
For Portfolios/Agency websites, and blogs Gatsby is just perfect (but not limited to).
Great to read these replies, I was leaning towards Gatsby and now my decision is definitely made : )
But create-react-app shows up perfectly fine on browser ? Like it's all writtrn in html5 and css3. Are we talking about the same thing here ?
Next also allows for statically generating pages
This is the greatest explanation
If your site is largely static content but you need to geolocate based on client ip/location (not using the navigator api) something like Next is nice since you have access to the full set of request data and you can also render static pages.
What if you have a site that has lots of updating and sharing, but all of that happens inside authenticated areas, therefore not really visible to search bots. Would Gatsby be the better choice there over Next.JS? Like, I'd want my landing page and registration and contact pages all SEO'd, but those are relatively static, and the dynamic stuff happens behind the login.
Really good comparison, thanks a lot!
Been waiting for this my entire life,
Thank you for this great explanation.
I love gatsby but asked myself about SEO
What about pre-render services like Netlify or Prerender.io?
Im really loving your videos Ben! thx
Thanks Ben. Very helpful info. Much appreciated. Any thoughts on the best way to add specific head>meta tags for a Gatsby site in order to improve SEO on individual pages?
Thank you for your explanation
Thanks for the illustrations
hey, i want to build an admin dashboard. can you tell me which one is better?
Thanks, Ben! I’d love to see a Gatsby + Prisma project. Maybe a Reddit clone.
Yeah, sure.
For a Reddit clone, it would make more sense with Next.js (because data changes frequently) =)
TechStacker, if real-time SEO is less important than development cost/experience, then you might want to choose Gatsby even for the Reddit clone. The Prisma backend is ideal in this case.
I have a few series planned and then I'll see if I can fit a Gatsby + Prisma project in
Ben Awad, excellent, I hope you’ll find a way to fit it in, even if it’s just the wiring together of a very basic project.
Sir Could you please make a video explaining the resources you use to learn or enhance your skills about languages
For me atleast, try using medium or dev.to since there are a lot of articles there regarding React and maybe buy a course in udemy.
if I've already used CRA for a website that needs good SEO, what should I do?
Wondering is it suitable to use Nextjs to develop a multi vendor ecommerce platform such as Amazon, Alibaba or Shopee?
No
Hello Ben, do you have any recomemndations (maybe a video) about what server hosting to use in order to store a react app (app) + nodejs (backend), I know there are tons but I'd like to hear your recomendations. Thanks
I like to use digital ocean or heroku for the server and netlify for the react application
I'm thinking to move application to gatsby where data is flows from backend database through my API layer. The data is frequently updated into SQL DB. The front end site content is all dynamic. Do you think usage of gatsby here will be suitable or should I use NextJs
> front end site content is all dynamic
if you need good SEO on it then Next.js
wow thank you. i am learning really useful things always.
NextJS's getInitialProps is pretty usefull if the data for your project updates frequently
If your using a non-graphql API with Gatsby the response is cached (using gatsby-node.js) developing in local is a pain if you need to update that values.
Hey - I love your presentations!
need your help!!!
We are using react-static but not seeing content in view page source as per route url. And route urls not showing in google result. We are planning migration from React-Static to Gtsby for best SEO result. Can you share me your inputs for best approach for SEO. Thanuks much in advance!
This explanation is really good even for normal people (no coders 😅)... a friend who is feeling bad because he doesn’t know how to make it work RSS feed api for podcasts, he said he tried to make it work with Graphql but nothing... wise coder, what are your recommendations?? Pleasee
Good explanation. Thanks.
I think you should see preact it's quite easy and super light SSR PWA and all the goodness 3kb and it's literally react. I like Next and Gatsby both it's a Toss up, honestly I don't like Gatsby using graphql, just not a fan. I thought nextjs by zeit is easy without even using SSR. CRA is totally custom where two other are semi ready, especially Gatsby w/starter templates. Yet I agree on 95% of your thoughts. Last, preact-compat makes everything react work with preact.
also, great presentation here
Preact has SSR?
very helpful video, thank you!
What!!! You said when don't want a public facing website or user to log in, use create-react-app?
How come? I sign in my users on CRA. Can you clarify your statement please?
login is fine with CRA
CRA is less good if you need SEO on dynamic pages
Awesome thanks for explaining...
Watching your video at 4:43 I think you can embed React apps within i.e Drupal pages and then achieve good SEO too.
That is a great broad overview of the pros and cons. Thanks.
thanks, for the clear explaination.
So informative! Thank you
You should've mentioned the fact that customizing CRA is much worse than next / gatsby as you have to eject. (Say adding SASS support / modifying your .babelrc / webpack config)
I'm just using CRA as an example, you can replace that with any client side rendering boilerplate.
You can also use Parcel (and create parcel app) which is zero configuration out of the box and adding common libraries such as SASS and LESS is quite easy compared to web-pack.
Is parcel production ready? I've been wanting to use it in real projects, but haven't heard of anyone using it outside of small examples
@@bawad I would say that as long as you are using common JavaScript libraries/frameworks(TS, React, Vue, JS, etc) and are building for the browser , yes. I know they are being ambitious and supporting builds for languages like Kotlin and I would steer clear there. I know a company with a heavy duty financial comparison/aggregator site using it and they seem to be a fan. But again, I think for more common use cases it should be fine.
you can use sass in CRA now with no mods. CRA keeps getting better, but if before you eject try replacing react-scripts
How do you go about writing tests for your code?
what type of code?
Like how do you test your code that implements your business logic? In most of your projects there aren’t any unit tests etc...
Yeah, I don't write too many unit tests, but when I do, I like to use jest
Modern crawlers such as Google/Bing can now crawl JavaScript
So maybe Gatsby with Shopify building a static ecommerce website is a good choice.
Thanks alot Ben
Great video!
what is seo?
Search engine optimization
I love your tutorial. Can you please tell me how to generate hash classes in gatsby for ex. _[hash:base:64:6]
I have no idea how
Thank you!
Is this opinion still valid? I'm searching about Next.js or Gatsby and saw that Next.js can be used as static page generator also... Trying to figure out wich is best for a website that needs both... static content (like main page, landing pages, a blog posts), but also has a dinamic generated content at Client Side Rendering (input a field, call a Lambda Function, and render a table with the response)...
Shoud be the landing page for this tool here: ctools.com.br
Now that Next.js can do static page generation, you can uses it for something like that where you need both
THANK YOU!
So in conclusion, in the end, I have to learn all three...
Thank you.
So I should consider using Gatsby.. but I don't see why, Next.js is already good for what I do
Use Gatsby with GraphCMS if your data change frequently
Basically always use next js if SEO is important and data changes often (so 90%of cases - e-commerce websites, business websites, blogs ).. For portfolio site you can use cra
I would say a blog, portfolio site, and small e-commerce sites would do well with Gatsby
What about a property listings website such as airbnb? Is next js better or create react app more suitable? I feel that data (property listings) change quite frequently so i guess nextjs is d better choice?
For a simple one you could get away with Gatsby but for anything complex I would go with next.js
@@bawad Thanks Ben
@@bawad Thanks Ben