[{"data":1,"prerenderedAt":141},["ShallowReactive",2],{"article:what-is-csr-ssr-ssg-isr-different-rendering-strategies-and-which-framework-does-it-better-angular-react-vue":3,"\u002Fblog\u002Fwhat-is-csr-ssr-ssg-isr-different-rendering-strategies-and-which-framework-does-it-better-angular-react-vue-surround":130},{"id":4,"title":5,"author":6,"body":7,"date":117,"description":118,"extension":119,"image":120,"meta":121,"minRead":122,"navigation":123,"path":124,"published":123,"seo":125,"stem":126,"tags":127,"__hash__":129},"blog\u002Fblog\u002Fwhat-is-csr-ssr-ssg-isr-different-rendering-strategies-and-which-framework-does-it-better-angular-react-vue.md","What is CSR, SSR, SSG, ISR (Different Rendering Strategies) and which framework does it better (Angular, React, Vue)","Baljeet Singh",{"type":8,"value":9,"toc":109},"minimark",[10,15,19,22,29,33,36,39,58,62,65,68,83,87,90,93,106],[11,12,14],"h2",{"id":13},"csr","CSR",[16,17,18],"p",{},"CSR stands for Client Side Rendering. Here the entire website is rendered in the browser.",[16,20,21],{},"Use when building a admin dashboard and when seo is not important. Required javascript enabled on the browser.",[16,23,24,28],{},[25,26,27],"strong",{},"Angular, React, Vue"," all support it out of the box.",[11,30,32],{"id":31},"ssr","SSR",[16,34,35],{},"SSR stands for Server Side Rendering. Here the webpages are rendered on the server and then sent to the client.",[16,37,38],{},"Use when speed and seo is important. App works without javascript enabled in browser.",[16,40,41,44,45,48,51,52,54,57],{},[25,42,43],{},"Angular"," supports it via Angular Universal",[46,47],"br",{},[25,49,50],{},"React"," via NextJS",[46,53],{},[25,55,56],{},"Vue"," via NuxtJS",[11,59,61],{"id":60},"ssg","SSG",[16,63,64],{},"SSG stands for Static Site Generation. Here the webpages are rendered on the build time.",[16,66,67],{},"Use when speed and seo is important. Host the app on any static hosting (netlify\u002Fvercel)",[16,69,70,72,73,75,77,78,80,82],{},[25,71,43],{}," supports it via Scully\u002FAngular Universal",[46,74],{},[25,76,50],{}," via NextJS\u002FGatsby",[46,79],{},[25,81,56],{}," via NuxtJS\u002FGridsome",[11,84,86],{"id":85},"isr","ISR",[16,88,89],{},"ISR stands for Incremental Static Regeneration. Here the webpages are regenerated on the fly based after the defined time.",[16,91,92],{},"Same benefits as SSG. Entire app doesn't need to be build after each change.",[16,94,95,97,98,100,51,102,104,97],{},[25,96,43],{}," doesn't support it",[46,99],{},[25,101,50],{},[46,103],{},[25,105,56],{},[16,107,108],{},"Can you share an app you built and which rendering strategy and framework you used❓",{"title":110,"searchDepth":111,"depth":111,"links":112},"",2,[113,114,115,116],{"id":13,"depth":111,"text":14},{"id":31,"depth":111,"text":32},{"id":60,"depth":111,"text":61},{"id":85,"depth":111,"text":86},"2021-07-18","A comparison of CSR, SSR, SSG, and ISR rendering strategies across Angular, React, and Vue frameworks.","md","\u002Fimg\u002FWhat_is_CSR_SSR_SSG_ISR_Different_Rendering_Strategies_and_which_framework_does_it_better_Angular_React_Vue_eqpd1y.jpg",{},3,true,"\u002Fblog\u002Fwhat-is-csr-ssr-ssg-isr-different-rendering-strategies-and-which-framework-does-it-better-angular-react-vue",{"title":5,"description":118},"blog\u002Fwhat-is-csr-ssr-ssg-isr-different-rendering-strategies-and-which-framework-does-it-better-angular-react-vue",[128],"Web Development","lMQVUkg7e1bQ1dBwu-qyifiK2bjHjO-Zbgo7eqJSCXA",[131,136],{"title":132,"path":133,"stem":134,"description":135,"children":-1},"Sublime Text color scheme for Intellij Jetbrains (phpstorm\u002F webstorm)","\u002Fblog\u002Fsublime-text-color-scheme-for-intellij-jetbrains-phpstorm-webstorm-235","blog\u002Fsublime-text-color-scheme-for-intellij-jetbrains-phpstorm-webstorm-235","In this article we will take a look at how we can add Sublime Text color scheme inside Jetbrains (phpstorm\u002F webstorm)",{"title":137,"path":138,"stem":139,"description":140,"children":-1},"Which is Array Reduce method in Javascript","\u002Fblog\u002Fwhich-is-array-reduce-method-in-javascript","blog\u002Fwhich-is-array-reduce-method-in-javascript","Learn how the Array reduce method works in JavaScript with practical examples for summing values, flattening arrays, and more.",1775568346652]