I have done lot of research (and learning) in this area specifically. There are 4 different models: CSR, SSR, static, pre-rendering. I am sharing my experience (it might not fully accurate as it has been only 1-2 months that i am using nextjs and gatsby): 1) CSR (CRA): we all are aware. Should be used for applications (like todos, banking/finance etc). There are lot of tools to make it SEO friendly. You can use pre-rendering (react-static, react-snap) with react-helmet. You are good to go. 2) SSR (next js): dynamic data (which changes quite often like eCommerce products) and you need better SEO. However Dynamic data and SEO - you can get with CSR as well with react-helmet. Main Advantage of SSR is: You get to see the initial html within 5-10 milli seconds. Then server will send you the data and app will get rehydrated. Subsequent pages will behave like client side pages (fast response) and no whole page updates (unlike typical SSR) which feels good. SSR can handle any number of dynamic pages. 3) Static (gatsby): Blogs. It is fast (super super fast). Can handle dynamic data as well but not the main goal. SEO is built in and caching is awesome. reactjs website is built using gatsby. 4) pre-rendering (react-static, react-snap): These are built on top of CRA. React-Snap can be used with other frameworks as well. pre-rendering should be used for something in between CSR and Static. If you already have an app built using CRA then use this method. Generally 5-10 lines (depending upon the use case) of coding will get you good results in terms of initial html display and SEO. But it should be used carefully. Pre-redering will build (convert them into static plus dynamic) your pages in advance. If you have got too much dynamic content it will take lot of time. In that case it is better to go with SSR. But you can start immediately before making a transition to SSR. There are many options these days. You need to think what is your use case and choose appropriately. Happy holidays and happy coding :)
In order to increase the page responsiveness in low time and implementing data compression in images usages of new stacks are being done on a vast scale if you roll over and find you may see a lot of e-commerce page using static site generators earlier there was a problem with language translation now even those are fixed everybody loves speed it maintains reputation with good SEO.
Nice summary. However two things I want to add: 1) react-helmet is no way comparable to SEO capabilities of SSR or Static Sites as with react helmet you can't get SEO on fetched content. Which is essentially a limitation of any SPA. 2) One more significant advantage you get for a SSR or Static Site is security as api calls are being made by the server (at build or request time) and not the client itself.
This should definitely get an updated follow-up, now that Vercel (formerly ZEIT, who made Next.js) has become such a big alternative to Netlify. Also it's (obviously) so tightly integrated with Next, which has gotten a huge bump with v10 imho
Great explanation - especially about the trade-offs involved. However, none of this seems particularly new. People have been deploying mostly-static web sites which front a wall of JSON APIs for the dynamic stuff for years haven't they? Am I missing something?
Haven't heard of Serverless Pre-Rendering but it basically sounds like an age-old practice that many news article sites have done for a long time: basically having SSR on a server and setting headers for edge-cache which means your CDN caches the page after it's been requested once. Usually you just cache for a few minutes, meaning that requests for a rarely visited article might go down to your server every time. But popular pages with thousands of visits per minute will often just result in a handful of requests reaching the server, the rest handled just return cached HTML from the CDN.
Hi there Ben In a previous video you said you hate front-end. And I’m in the same boat as you, I just cannot stand CSS I just hate it with passion. But still I see you develop in react which is the view in an MVC model How do you manage then the front end development of a project ? If a client come with a PSD design what do you do
Do your housemates /family hate you making videos.. on the important points they are throwing plates around and turning the TV right up 😂 Annoying listening on headphones.. You need one of those red "REC"recording lamps.. although that might actually make them louder as it sounds like they're doing it on purpose lol 😂 Love you work anyway 😊😊
I'm not sure server side rendering make it your project out of the JAM Stack. I mean, what is a static website anyway, just some html sent to the browser. So prefetching data on the server to send "non empty" html file is kind of the same, no template engine, still just javascript. That said, I don't think it's that important to call something JAM Stack or not. Thanks for your videos mate !
Wait so is create-react-app a statically generated site or are SPA statically generated sites? It's definitely not SSR, in the end you get a single html file? So where do these fall?
It sort of depends on how you're using it. If you host a production build of Create React App on a static hosting site and are fetching data through an API set up elsewhere, then the CRA is considered JAMStack. If you're using CRA on a webserver along side your API framework (like Express), then you don't get the benefits of JAMStack. A SPA, or multi-page application, can fall under either category, depending on how you set it up.
Most of us already now it's just be given a word that sounds like something really difficult, just they've been doing it from the word go. Strapi, headless CMS and Gatsby is the one that i use. :)
Hugo site generator is blazing fast! So, if you have a large site this wouldn't be an issue with it. And there are probably some other work arounds you can do. Like breaking up your site into different segments.
@@aammssaamm Right, Hugo won't do your work for you. But when you have a large site that you want to be static it is one of the fastest static site generators from what I understand. So, it makes scaling easier. But if you have a really large site then you need to figure out different methods for scaling, like possibly breaking the site up into different segments so you don't have to generate quite so many files all at once. Then again. Maybe a dynamic site would make sense at that point. Where you might only cache the html file only after it has been requested once. I can't imagine a site that is that large would really need to show every single file in the site. It's more about the meta data and creating links.
@@aammssaamm Yes, for large sites in large companies who need high performance things get really messy. And you sound like a bot. Yes, I'm chatting with a bot :-/
I don't see why you can't have static HTML pages and then call APIs that return HTML partials and then include that into your page. I would still think that would be a "JAMStack"
@@bawad Yeah, I agree most of the time most people would be returning JSON. But there is nothing in the philosophy that says it has to be JSON. I could be HTML partials, CSV, XML or some other data exchange. The main point in JAMStack is that you don't rely on a single source for all your APIs that you use third parties where it makes sense so you don't have to scale everything out on your own. jamstack.org
how come a static generated site is not good for SEO since all the content is there online for google to crawl it ?? I think you did not explain the things correctly
This looks cool, but I don't think I am ready for it yet. I am having enough trouble just keeping up with everything else on the devops/aws side let alone learning a new wheel. LAMP is good enough for now.
Dude that'd be so awesome if you made some django tutorials. Or even one about the basic moving parts and how the fit together, the views, the urls etc. Great stuff!
One of the pain point by loading things dynamically using ajax is that the developer need to manage all the loading state, error, etc compared to the traditional way when the browser handle that for you
I watched this and grew a two foot long grey beard. Using another language to generate html files? What is this? Why don’t you just write the damn html file? What is going on? How have we gotten this needlessly complicated? Why do I have arthritis now?
What is jam stack? Well, I'll tell you what it isn't. Joke? Or irony? So let me tell you a story. When modern front end developers started to touch every area of development in a project, then jam stack was born. Also, hate for big frameworks and good knowledge of inner workings of js factored in its birth. Mean stack inst flexible because you're bound to just use the said tech. Otherwise you'll not be working with the mean stack. While jam stack gives you the freedom to use any front-end framework or even just vanilla js, which means jam stack gives you the real flexibility to bend on whatever tech you like the use. After, a minute or two I stopped watching the video because the content seemed obsolete and highly unrelatable. Hope, you'll revamp the video with new knowledge and correct concepts. And this time please tell what it really is!
![เปิดบ้าน พี่ตูน Bodyslam หลังใหม่คนแรก ที่ภูเก็ต l [Nickynachat]](http://i.ytimg.com/vi/flFwcmyDQSk/mqdefault.jpg)
Note: Next.js doesn't only do SSR now, you can also do CSR/static as well
L:,
I have done lot of research (and learning) in this area specifically. There are 4 different models: CSR, SSR, static, pre-rendering. I am sharing my experience (it might not fully accurate as it has been only 1-2 months that i am using nextjs and gatsby):
1) CSR (CRA): we all are aware. Should be used for applications (like todos, banking/finance etc). There are lot of tools to make it SEO friendly. You can use pre-rendering (react-static, react-snap) with react-helmet. You are good to go.
2) SSR (next js): dynamic data (which changes quite often like eCommerce products) and you need better SEO. However Dynamic data and SEO - you can get with CSR as well with react-helmet. Main Advantage of SSR is: You get to see the initial html within 5-10 milli seconds. Then server will send you the data and app will get rehydrated. Subsequent pages will behave like client side pages (fast response) and no whole page updates (unlike typical SSR) which feels good. SSR can handle any number of dynamic pages.
3) Static (gatsby): Blogs. It is fast (super super fast). Can handle dynamic data as well but not the main goal. SEO is built in and caching is awesome. reactjs website is built using gatsby.
4) pre-rendering (react-static, react-snap): These are built on top of CRA. React-Snap can be used with other frameworks as well. pre-rendering should be used for something in between CSR and Static. If you already have an app built using CRA then use this method. Generally 5-10 lines (depending upon the use case) of coding will get you good results in terms of initial html display and SEO. But it should be used carefully. Pre-redering will build (convert them into static plus dynamic) your pages in advance. If you have got too much dynamic content it will take lot of time. In that case it is better to go with SSR. But you can start immediately before making a transition to SSR.
There are many options these days. You need to think what is your use case and choose appropriately. Happy holidays and happy coding :)
Thanks so much 🙏
In order to increase the page responsiveness in low time and implementing data compression in images usages of new stacks are being done on a vast scale if you roll over and find you may see a lot of e-commerce page using static site generators earlier there was a problem with language translation now even those are fixed everybody loves speed it maintains reputation with good SEO.
Nice summary. However two things I want to add:
1) react-helmet is no way comparable to SEO capabilities of SSR or Static Sites as with react helmet you can't get SEO on fetched content. Which is essentially a limitation of any SPA.
2) One more significant advantage you get for a SSR or Static Site is security as api calls are being made by the server (at build or request time) and not the client itself.
Note:- there is also (ISR) incremental static rendering or hybrid rendering offered by Next.js and angular respectively.
this chanell is so under rated
thanks :)
Not enough Angular bashing IMO :)
Agreed
or in short: do as much as you can at compile time not runtime
This should definitely get an updated follow-up, now that Vercel (formerly ZEIT, who made Next.js) has become such a big alternative to Netlify. Also it's (obviously) so tightly integrated with Next, which has gotten a huge bump with v10 imho
The absolute best video I’ve come across on this topic. Thank you Ben, JAMStack has finally clicked for me!
Great explanation - especially about the trade-offs involved. However, none of this seems particularly new. People have been deploying mostly-static web sites which front a wall of JSON APIs for the dynamic stuff for years haven't they? Am I missing something?
Haven't heard of Serverless Pre-Rendering but it basically sounds like an age-old practice that many news article sites have done for a long time: basically having SSR on a server and setting headers for edge-cache which means your CDN caches the page after it's been requested once.
Usually you just cache for a few minutes, meaning that requests for a rarely visited article might go down to your server every time. But popular pages with thousands of visits per minute will often just result in a handful of requests reaching the server, the rest handled just return cached HTML from the CDN.
Man so many terms in this industry!! Had no idea what this was but as it turns out I guess I just built a jamstack project lol
THere is hugo btw, which is very fast static site generator. way faster than gatsby from what I hear.
thank u mr asexual shirt
Hi there Ben
In a previous video you said you hate front-end. And I’m in the same boat as you, I just cannot stand CSS I just hate it with passion.
But still I see you develop in react which is the view in an MVC model
How do you manage then the front end development of a project ? If a client come with a PSD design what do you do
I don't love working with css, but I know how to do it
if a client came with a PSD design then I'd be able to build it
1:05 when I first saw it, I thought it's an Twig template as they have almost (if not completely) the same syntax
Me too.
@@stylishskater92 #php
mind reader. I was googling about the definition of the JAM stack yesterday.
Me too!
I too lol😂😂
Do your housemates /family hate you making videos.. on the important points they are throwing plates around and turning the TV right up 😂
Annoying listening on headphones..
You need one of those red "REC"recording lamps.. although that might actually make them louder as it sounds like they're doing it on purpose lol 😂
Love you work anyway 😊😊
pretty sure google crawls SPAs just fine now adays, so thats probably the ultimate way to do this.
Could I make a JAMstack website without using any libraries (no react, no angular, no vue)?
yeah
@@bawad how thou
@@aestheticallyamazing2003 use html. watch the video
ok
@ben , nice intro to JAMstack, what are your thoughts on headless CMS strapi?
Never tried it
This is a very good video but I think you should just call it client side Rendering if you are not using pre-built markup
Awsome Ben... Your vedios are great for learning. Thanks Alot
Well done. Just the right info presented in just the right way!
I'm not sure server side rendering make it your project out of the JAM Stack. I mean, what is a static website anyway, just some html sent to the browser. So prefetching data on the server to send "non empty" html file is kind of the same, no template engine, still just javascript. That said, I don't think it's that important to call something JAM Stack or not. Thanks for your videos mate !
the big deal is being able to leverage a CDN
Wait so is create-react-app a statically generated site or are SPA statically generated sites? It's definitely not SSR, in the end you get a single html file? So where do these fall?
It sort of depends on how you're using it. If you host a production build of Create React App on a static hosting site and are fetching data through an API set up elsewhere, then the CRA is considered JAMStack. If you're using CRA on a webserver along side your API framework (like Express), then you don't get the benefits of JAMStack. A SPA, or multi-page application, can fall under either category, depending on how you set it up.
I really enjoy listening to your explanations
This is rad. Thank you. Subscribed.
Thanks Ben for another "Ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh............." moment XD
I love Netlify
Most of us already now it's just be given a word that sounds like something really difficult, just they've been doing it from the word go. Strapi, headless CMS and Gatsby is the one that i use. :)
How exactly are the CDN's structured ?
I don't know too much about the internals of a CDN
So SRR SPA is not a duality but a gradation. Can you do a video on different degrees of SSR and a brief advantage/disadvantage on each?
What are you considering different degrees of SSR?
Hugo site generator is blazing fast! So, if you have a large site this wouldn't be an issue with it. And there are probably some other work arounds you can do. Like breaking up your site into different segments.
It will not do your work for you.
@@aammssaamm Right, Hugo won't do your work for you. But when you have a large site that you want to be static it is one of the fastest static site generators from what I understand. So, it makes scaling easier.
But if you have a really large site then you need to figure out different methods for scaling, like possibly breaking the site up into different segments so you don't have to generate quite so many files all at once.
Then again. Maybe a dynamic site would make sense at that point. Where you might only cache the html file only after it has been requested once. I can't imagine a site that is that large would really need to show every single file in the site. It's more about the meta data and creating links.
@@dovh49 Sounds like a mess.
@@aammssaamm Yes, for large sites in large companies who need high performance things get really messy. And you sound like a bot.
Yes, I'm chatting with a bot :-/
@@dovh49 I seem to nail it since you went personal :) If you worked for a large company you would know they have enough money for better solutions.
counted it, 2 eye blinks/ minute.
How does one handle user specific content like shopping carts? How do sessions work?
You usually generate only the common stuff and than call the api to fetch the rest, user specific stuff and render that on client.
@@panstromek exactly and then sessions are usually stored in a cookie or jwt
API call.
I don't see why you can't have static HTML pages and then call APIs that return HTML partials and then include that into your page. I would still think that would be a "JAMStack"
I think it would be closer to the JAMStack philosophy if you returned JSON data from your api and you created the HTML partials on the frontend
@@bawad Yeah, I agree most of the time most people would be returning JSON. But there is nothing in the philosophy that says it has to be JSON. I could be HTML partials, CSV, XML or some other data exchange. The main point in JAMStack is that you don't rely on a single source for all your APIs that you use third parties where it makes sense so you don't have to scale everything out on your own. jamstack.org
fair enough, JAMStack is a loosely defined
You can. It makes your development a breath. The content can be also dynamic.
Congrats to 1k videos!
thank you!
wtf is SEO
Search Engine Optimization
Love what you're doing, keep up this content
how come a static generated site is not good for SEO since all the content is there online for google to crawl it ?? I think you did not explain the things correctly
static is good for SEO, client side rending is bad
@@bawad Don'r render on a client :)
Q: What is JAMStack?
A: Another fancy JS shit.
This looks cool, but I don't think I am ready for it yet. I am having enough trouble just keeping up with everything else on the devops/aws side let alone learning a new wheel. LAMP is good enough for now.
Is netlify cms free??
idk never heard of the cms
Yeah
@@bawad It's pretty nice deploy-wise
It's kind of like meteorjs with python backend
Dude that'd be so awesome if you made some django tutorials. Or even one about the basic moving parts and how the fit together, the views, the urls etc. Great stuff!
Check out Traversy Media's django crash course
no plans to do django tutorials at the moment, I'm enjoying node.js
One of the pain point by loading things dynamically using ajax is that the developer need to manage all the loading state, error, etc compared to the traditional way when the browser handle that for you
It was a good video, but you have overloaded with lots of information, I suggest to keep the video short and specific so things gets easily digested.
What about separation?
What do you mean?
You just completely separate JS from HTML and CSS from JS.
I watched this and grew a two foot long grey beard. Using another language to generate html files? What is this? Why don’t you just write the damn html file? What is going on? How have we gotten this needlessly complicated?
Why do I have arthritis now?
So you’ve never used react or angular before?
What is jam stack? Well, I'll tell you what it isn't. Joke? Or irony?
So let me tell you a story.
When modern front end developers started to touch every area of development in a project, then jam stack was born. Also, hate for big frameworks and good knowledge of inner workings of js factored in its birth.
Mean stack inst flexible because you're bound to just use the said tech. Otherwise you'll not be working with the mean stack. While jam stack gives you the freedom to use any front-end framework or even just vanilla js, which means jam stack gives you the real flexibility to bend on whatever tech you like the use.
After, a minute or two I stopped watching the video because the content seemed obsolete and highly unrelatable. Hope, you'll revamp the video with new knowledge and correct concepts. And this time please tell what it really is!