{"id":55581,"date":"2022-09-28T15:25:16","date_gmt":"2022-09-28T09:55:16","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=55581"},"modified":"2022-09-30T15:59:49","modified_gmt":"2022-09-30T10:29:49","slug":"server-side-rendering-vs-static-site-generation-in-next-js","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/","title":{"rendered":"Server-side Rendering vs Static Site Generation in Next.js"},"content":{"rendered":"<p><a href=\"https:\/\/nextjs.org\/docs\/getting-started\"><strong>NextJs<\/strong><\/a> is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications.<\/p>\n<p>There can be many advantages of Next.js as:<\/p>\n<ul>\n<li>Great for SEO.<\/li>\n<li>Image Optimization &#8211; Next.js provide its Image component that improves the performance of the site, and images are only loaded when they enter the viewport, with optional blur-up placeholders.<\/li>\n<li>API routes \u2013 easy creation of API endpoint as a Node.js serverless function.<\/li>\n<li>Incremental Static Regeneration &#8211; allows web developers to update existing pages by re-rendering them in the background as traffic comes in. This way, static content can become dynamic.<\/li>\n<li>TypeScript support.<\/li>\n<\/ul>\n<p>Besides all of the fantastic features that Next.js has to offer, there\u2019s one, in particular, that is very powerful and amazing: the ability to use different pre-rendering techniques. These techniques are Server-side rendering, Static site generation, and Incremental static regeneration.<\/p>\n<p>Now, let&#8217;s deep dive into the details of the two rendering techniques out of the most commonly used we have.<\/p>\n<p><strong>Server-side Rendering<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-55578 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/09\/server-side-rendering.png\" alt=\"Blog image\" width=\"805\" height=\"295\" srcset=\"https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/server-side-rendering.png 805w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/server-side-rendering-300x110.png 300w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/server-side-rendering-768x281.png 768w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/server-side-rendering-624x229.png 624w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><\/p>\n<p>Server-side rendering (SSR) is where the server sends a ready-to-render HTML page and the JS scripts that are required to make the page interactive. The HTML page is rendered instantly with all the static elements. During the rendering, the browser downloads and executes the JS code after which the HTML page becomes interactive. Now, the interactions on this page will be handled by the browser on the client side. For any new data, the browser will send a request to the server through APIs, and only the newly required information is fetched.<\/p>\n<p><strong>When to use Server-side rendering?<\/strong><\/p>\n<p>SSR is proposed for apps in which we have to pre-render commonly updated data from external sources. This technique is exceptionally urged when the data cannot be statically generated before a user request takes place and as long as it is expected to be available to search engines. A server-side rendered application enables pages to load faster, improving the user experience. When rendering server-side, search engines can easily index and crawl content because the content can be rendered before the page is loaded, which is ideal for SEO.<\/p>\n<p><strong>Method to implement Server-side rendering<\/strong><\/p>\n<p>If you export a function called <em>getServerSideProps<\/em>\u00a0from a page, Next.js will pre-render this page on each request using the data returned by <em>getServerSideProps<\/em>.<br \/>\nNote:- <em>getServerSideProps<\/em> only runs on server-side and never runs on the browser.<\/p>\n<p>There can be two situations where this method can be used &#8211;<\/p>\n<ol>\n<li>First is, it will run at request time, and the page will be pre-rendered with the returned props, when we are requesting the page directly.<\/li>\n<li>Second is, Next.js will send an API request to the server, which runs <em>getServerSideProps<\/em>, when we are requesting the page on client-side page transitions through next\/link or next\/router.<\/li>\n<\/ol>\n<p>Example using <em>getServerSideProps\u00a0<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-55575 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/09\/getServerSideProps.png\" alt=\"Blog image\" width=\"694\" height=\"483\" srcset=\"https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/getServerSideProps.png 694w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/getServerSideProps-300x209.png 300w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/getServerSideProps-624x434.png 624w\" sizes=\"auto, (max-width: 694px) 100vw, 694px\" \/><\/p>\n<p><strong>Static Site Generation<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-55580 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/09\/Static_Side_Generation_final.png\" alt=\"Blog image\" width=\"802\" height=\"308\" srcset=\"https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/Static_Side_Generation_final.png 802w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/Static_Side_Generation_final-300x115.png 300w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/Static_Side_Generation_final-768x295.png 768w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/Static_Side_Generation_final-624x240.png 624w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\" \/><\/p>\n<p>Static Site Generation describes the process of compiling and rendering a website at build time. The output is a cluster of static files, including the HTML, JavaScript and CSS files.<br \/>\nWhen using SSG with Next.js, the page is pre-rendered at compile time. That means that the user won\u2019t have to wait for the page to load at the browser, the page will simply be rendered.<\/p>\n<p><strong>When to use Static Site Generation?<\/strong><\/p>\n<p>Static Site Generation are generally used in site like blogs where the content is not updated very often. SSG can be generated prior to a user request. It means that the data will be available at build time, or we can say \u2013 on every page where you want to present static content.<\/p>\n<p><strong>Method to implement Static Site Generation?<\/strong><\/p>\n<p>Next.js pre-renders pages using static generation, which means that it doesn\u2019t fetch any data by default. In any case, if we need to generate a page that includes such kind of data, we can do this in two ways:<\/p>\n<ol>\n<li>If the page content depends on external data, use <em>getStaticProps<\/em> method only.<\/li>\n<li>If page paths depend on external data \u2013 use the <em>getStaticPaths<\/em> method in addition to <em>getStaticProps<\/em>.<\/li>\n<\/ol>\n<p>Example using <em>getStaticProps<\/em> and <em>getStaticPaths<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-55576 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/09\/getStaticPropsandGetStaticPaths.png\" alt=\"Blog image\" width=\"554\" height=\"570\" srcset=\"https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/getStaticPropsandGetStaticPaths.png 554w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/getStaticPropsandGetStaticPaths-292x300.png 292w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/getStaticPropsandGetStaticPaths-24x24.png 24w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/getStaticPropsandGetStaticPaths-48x48.png 48w\" sizes=\"auto, (max-width: 554px) 100vw, 554px\" \/><\/p>\n<p><strong>Conclusion<\/strong><\/p>\n<p>Depending on the requirement we can choose which rendering mode we want to implement. Suppose, we are working on simple or non-complex sites like blogs, so in this scenario we can use SSG as the content is static and not changing. Hence all the files will be stored on our server at the build time and, when the user requests for it , it will get loaded in very less time.<br \/>\nNow, in another scenario where the content is dynamic and pages are more complex like in an e-commerce site, we can use SSR . With these tools, building rich web applications has become easier and more fun.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-55577 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/09\/ssg_vs_ssr_final.png\" alt=\"Blog image\" width=\"10450\" height=\"5350\" srcset=\"https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/ssg_vs_ssr_final.png 10450w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/ssg_vs_ssr_final-300x154.png 300w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/ssg_vs_ssr_final-1024x524.png 1024w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/ssg_vs_ssr_final-768x393.png 768w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/ssg_vs_ssr_final-1536x786.png 1536w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/ssg_vs_ssr_final-2048x1048.png 2048w, https:\/\/2thenew.online\/blog\/wp-content\/uploads\/2022\/09\/ssg_vs_ssr_final-624x319.png 624w\" sizes=\"auto, (max-width: 10450px) 100vw, 10450px\" \/><\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications. There can be many advantages of Next.js as: Great for SEO. Image Optimization &#8211; Next.js provide its Image component that improves the performance of the [&hellip;]<\/p>\n","protected":false},"author":1496,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":267,"footnotes":""},"categories":[3429,4684,3038],"tags":[5028],"class_list":["post-55581","post","type-post","status-publish","format-standard","hentry","category-front-end-development","category-mean-2","category-react-js","tag-next-js-ssr-ssg"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications. There can be many advantages of Next.js as: Great for SEO. Image Optimization - Next.js provide its Image component that improves the performance of the\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Rahul Vashishtha\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"TO THE NEW BLOG\" \/>\n\t\t<meta property=\"og:type\" content=\"blog\" \/>\n\t\t<meta property=\"og:title\" content=\"Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications. There can be many advantages of Next.js as: Great for SEO. Image Optimization - Next.js provide its Image component that improves the performance of the\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@tothenew\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog\" \/>\n\t\t<meta name=\"twitter:description\" content=\"NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications. There can be many advantages of Next.js as: Great for SEO. Image Optimization - Next.js provide its Image component that improves the performance of the\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#article\",\"name\":\"Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog\",\"headline\":\"Server-side Rendering vs Static Site Generation in Next.js\",\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rahul-vashishtha\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"\\\/blog\\\/wp-ttn-blog\\\/uploads\\\/2022\\\/09\\\/server-side-rendering.png\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#articleImage\"},\"datePublished\":\"2022-09-28T15:25:16+05:30\",\"dateModified\":\"2022-09-30T15:59:49+05:30\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#webpage\"},\"articleSection\":\"Front End Development, MEAN, React.js, next.js ssr ssg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/react-js\\\/#listItem\",\"name\":\"React.js\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/react-js\\\/#listItem\",\"position\":2,\"name\":\"React.js\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/react-js\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#listItem\",\"name\":\"Server-side Rendering vs Static Site Generation in Next.js\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#listItem\",\"position\":3,\"name\":\"Server-side Rendering vs Static Site Generation in Next.js\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/react-js\\\/#listItem\",\"name\":\"React.js\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\",\"name\":\"TO THE NEW Blog\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rahul-vashishtha\\\/#author\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rahul-vashishtha\\\/\",\"name\":\"Rahul Vashishtha\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#authorImage\",\"url\":\"https:\\\/\\\/newersworld-sf-static.tothenew.net\\\/prod\\\/profilePicFolder\\\/8f32b82b-6e9c-43bc-9980-3d1f7072b5f8_4626-Rahul-Vashishtha-PROFILEPICTURE.jpeg\",\"width\":96,\"height\":96,\"caption\":\"Rahul Vashishtha\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#webpage\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/\",\"name\":\"Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog\",\"description\":\"NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications. There can be many advantages of Next.js as: Great for SEO. Image Optimization - Next.js provide its Image component that improves the performance of the\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/server-side-rendering-vs-static-site-generation-in-next-js\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rahul-vashishtha\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rahul-vashishtha\\\/#author\"},\"datePublished\":\"2022-09-28T15:25:16+05:30\",\"dateModified\":\"2022-09-30T15:59:49+05:30\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\",\"name\":\"TO THE NEW Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog","description":"NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications. There can be many advantages of Next.js as: Great for SEO. Image Optimization - Next.js provide its Image component that improves the performance of the","canonical_url":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#article","name":"Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog","headline":"Server-side Rendering vs Static Site Generation in Next.js","author":{"@id":"https:\/\/2thenew.online\/blog\/author\/rahul-vashishtha\/#author"},"publisher":{"@id":"https:\/\/2thenew.online\/blog\/#organization"},"image":{"@type":"ImageObject","url":"\/blog\/wp-ttn-blog\/uploads\/2022\/09\/server-side-rendering.png","@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#articleImage"},"datePublished":"2022-09-28T15:25:16+05:30","dateModified":"2022-09-30T15:59:49+05:30","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#webpage"},"isPartOf":{"@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#webpage"},"articleSection":"Front End Development, MEAN, React.js, next.js ssr ssg"},{"@type":"BreadcrumbList","@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog#listItem","position":1,"name":"Home","item":"https:\/\/2thenew.online\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/category\/react-js\/#listItem","name":"React.js"}},{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/category\/react-js\/#listItem","position":2,"name":"React.js","item":"https:\/\/2thenew.online\/blog\/category\/react-js\/","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#listItem","name":"Server-side Rendering vs Static Site Generation in Next.js"},"previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#listItem","position":3,"name":"Server-side Rendering vs Static Site Generation in Next.js","previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.online\/blog\/category\/react-js\/#listItem","name":"React.js"}}]},{"@type":"Organization","@id":"https:\/\/2thenew.online\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/2thenew.online\/blog\/"},{"@type":"Person","@id":"https:\/\/2thenew.online\/blog\/author\/rahul-vashishtha\/#author","url":"https:\/\/2thenew.online\/blog\/author\/rahul-vashishtha\/","name":"Rahul Vashishtha","image":{"@type":"ImageObject","@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#authorImage","url":"https:\/\/newersworld-sf-static.tothenew.net\/prod\/profilePicFolder\/8f32b82b-6e9c-43bc-9980-3d1f7072b5f8_4626-Rahul-Vashishtha-PROFILEPICTURE.jpeg","width":96,"height":96,"caption":"Rahul Vashishtha"}},{"@type":"WebPage","@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#webpage","url":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/","name":"Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog","description":"NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications. There can be many advantages of Next.js as: Great for SEO. Image Optimization - Next.js provide its Image component that improves the performance of the","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/2thenew.online\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/#breadcrumblist"},"author":{"@id":"https:\/\/2thenew.online\/blog\/author\/rahul-vashishtha\/#author"},"creator":{"@id":"https:\/\/2thenew.online\/blog\/author\/rahul-vashishtha\/#author"},"datePublished":"2022-09-28T15:25:16+05:30","dateModified":"2022-09-30T15:59:49+05:30"},{"@type":"WebSite","@id":"https:\/\/2thenew.online\/blog\/#website","url":"https:\/\/2thenew.online\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/2thenew.online\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"TO THE NEW BLOG","og:type":"blog","og:title":"Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog","og:description":"NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications. There can be many advantages of Next.js as: Great for SEO. Image Optimization - Next.js provide its Image component that improves the performance of the","og:url":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/","og:image":"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","og:image:secure_url":"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","twitter:card":"summary","twitter:site":"@tothenew","twitter:title":"Server-side Rendering vs Static Site Generation in Next.js | TO THE NEW Blog","twitter:description":"NextJs is a framework to build a full-stack application with features such as server-side rendering using React framework. Today, it has become a consolidated framework for building amazing web applications. There can be many advantages of Next.js as: Great for SEO. Image Optimization - Next.js provide its Image component that improves the performance of the","twitter:image":"https:\/\/2thenew.online\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png"},"aioseo_meta_data":{"post_id":"55581","title":null,"description":null,"keywords":[],"keyphrases":{"focus":[],"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":{"id":"#aioseo-article-65e064b630bf7","slug":"article","graphName":"Article","label":"Article","properties":{"type":"BlogPosting","name":"#post_title","headline":"#post_title","description":"#post_excerpt","image":"","keywords":"","author":{"name":"#author_name","url":"#author_url"},"dates":{"include":true,"datePublished":"","dateModified":""}}},"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"}}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"created":"2022-09-30 09:46:40","updated":"2024-02-29 11:04:22","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.online\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.online\/blog\/category\/react-js\/\" title=\"React.js\">React.js<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tServer-side Rendering vs Static Site Generation in Next.js\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/2thenew.online\/blog"},{"label":"React.js","link":"https:\/\/2thenew.online\/blog\/category\/react-js\/"},{"label":"Server-side Rendering vs Static Site Generation in Next.js","link":"https:\/\/2thenew.online\/blog\/server-side-rendering-vs-static-site-generation-in-next-js\/"}],"_links":{"self":[{"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/posts\/55581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/users\/1496"}],"replies":[{"embeddable":true,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/comments?post=55581"}],"version-history":[{"count":3,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/posts\/55581\/revisions"}],"predecessor-version":[{"id":55642,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/posts\/55581\/revisions\/55642"}],"wp:attachment":[{"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/media?parent=55581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/categories?post=55581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2thenew.online\/blog\/wp-json\/wp\/v2\/tags?post=55581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}