Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Sanity
  • Platform

    Sanity Studio

    Flexible editing environment

    APIs

    Connect to anything

    Content Lake

    Real-time database

    Watch product demo

    Features

    Real-time collaboration

    Fearlessly work with content

    Precise content querying

    Treat content as data with GROQ

    Localization

    Coherent messaging across territories

  • Use cases

    E-commerce

    Richer shopping experiences

    Marketing sites

    Control your story

    Products & services

    Innovate and automate

    Mobile apps

    Content backend for every OS

    View all

    Integrations

    Shopify
    Mux
    Vercel
    Netlify
    Algolia
    Cloudinary
    BigCommerce
    Commerce Layer
    Smartling
    Transifex
    View all
  • Learn

    Documentation
    API reference
    Guides
    GROQ cheat sheet
    Sanity UI
    Get started

    Build and share

    Templates
    Tools and plugins
    Schemas and snippets
    Project showcase
    Share your work
    Browse Exchange

    Frameworks

    React
    Vue
    Next.js
    Nuxt.js
    Svelte
    Remix
    Gatsby
    Astro
    Angular
    Eleventy
    View all
  • Discover

    Blog
    Resource library
    Agency partners
    Become a partner
    Technical support
    Talk to sales

    Case studies

    Puma

    Source of truth for global markets

    Aether

    Unique digital shopping experience

    Morning Brew

    Omnichannel media distribution

    InVision

    Delivering exceptional customer experiences

    View all

    Popular guides

    Headless CMS
    Structured content
    Content modeling
    Headless SEO
    Static websites
    View all
  • Enterprise
  • Pricing
  • Log in
  • Contact sales
  • Get started
Contact salesGet started
  1. Resources
  2. Composable architecture
  3. SSR vs. SSG: A guide to making the right choice for your applications

Published June 7th 2023

SSR vs. SSG: A guide to making the right choice for your applications

  • Richard Lawrence

    A data scientist and developer, with an interest in marketing and search.

Web development has evolved remarkably over the past few years, with the advent of new tools and techniques for building and maintaining websites and applications.

Today, two approaches stand out in modern web development: Static Site Generation (SSG) and Server-Side Rendering (SSR). In this article, I will dive deep into the differences between SSG and SSR, their advantages, popular frameworks, and how Sanity fits into the contemporary web development landscape. Hopefully this will provide insights for web developers, technical project managers, and web designers to make informed decisions about which rendering approach to choose for their projects.

Demystifying Static Site Generation (SSG)

Static Site Generation is a technique for rendering web pages ahead of time, during the build process. The generated HTML, CSS, and JavaScript files are then served to the client, resulting in websites loading faster and providing heightened security.

The upsides of SSG

SSG has numerous benefits for web development:

  1. Speed: Pre-rendered pages are served directly from the server or a Content Delivery Network (CDN), reducing load times and enhancing the user experience.
  2. Security: Since there are no databases or server-side processes involved, SSG minimizes the attack surface and potential security vulnerabilities.
  3. Simpler Deployment: SSG omits the need for complex server setups or database management, streamlining the deployment process.
  4. SEO-friendly: Pre-rendered pages make it easier for search engine bots to crawl and index, improving search engine visibility and ranking.

However, SSG might not be the best choice for websites with dynamic or frequently updating content, as it requires a rebuild and redeployment each time content changes.

Deciphering Server-Side Rendering (SSR)

Server-Side Rendering is a technique where web pages are rendered on the server at request time for each user. This approach allows for dynamic data and interactive content to be generated on-the-fly, providing a more personalized user experience.

The benefits of SSR

SSR has its unique advantages for web development:

  1. Dynamic Content: SSR allows for the display of dynamic and frequently updating content, making it suitable for web applications that require real-time updates.
  2. SEO-optimized: Since HTML is generated on the server, search engine bots can more easily crawl and index the content, improving search visibility and rankings.
  3. User Experience: SSR offers a faster initial page load time and ensures that users are served up-to-date content.

However, SSR has drawbacks as well, such as slower rendering times compared to SSG and increased server load.

Comparing SSG and SSR

Both SSG and SSR are excellent for SEO, as they generate HTML outputs on the server, allowing search engine bots to crawl and index the pages more easily.

SSG offers faster rendering, which makes it more suitable for larger pages, whilst SSR enables you to keep dynamic content fresh.

Ultimately, the choice between SSG and SSR hinges on the specific needs of your web application. If all content and data is available at build time, then SSG is probably the best approach for you. Otherwise you may need to consider SSR.

Popular SSG and SSR frameworks

There are several popular frameworks for implementing SSG and SSR:

  • Next.js: A popular React framework that supports both SSG and SSR and has built-in features like dynamic page routing and incremental static regeneration.
  • Gatsby.js: A popular React-based SSG, suitable for static sites with rich features and optimized performance.
  • Nuxt.js: A popular Vue.js framework that supports both SSG and SSR, offering a range of features for building modern web applications.
  • Hugo: A fast and flexible SSG built with the Go programming language, suitable for blogs, documentation, and other static content-heavy websites.

Sanity: Seamless integration with SSG and SSR

Sanity is an open-source, API-based headless CMS that seamlessly integrates with major frameworks and platforms, including Next.js, Gatsby.js, Nuxt.js, and Hugo. It offers a powerful and flexible content platform that can work effectively with both SSG and SSR approaches.

Integration with Next.js

Sanity and Next.js both utilize React, making it convenient for developers to build and ship Next.js apps or websites. Sanity offers powerful query APIs for filtering, sorting, and shaping data, as well as real-time previews for catching errors before publishing.

With the official next-sanity toolkit, developers can supercharge their Next.js projects with live previews, image fetching, webhook validation, and much more.

Integration with Gatsby.js, Nuxt.js, and Hugo

Sanity can also be easily integrated with other popular SSG/SSR frameworks, such as Gatsby.js, Nuxt.js, and Hugo. By providing API endpoints and SDKs for these frameworks, Sanity allows developers to fetch and manipulate content from the Sanity Content Lake to create rich, dynamic, and scalable web applications.

But what about ISR?

As we have discussed the merits and limitations of both SSR and SSG, it's important to introduce a newer approach that combines the best of both worlds: Incremental Static Regeneration (ISR). This hybrid approach aims to bring the benefits of both SSR and SSG, while mitigating their respective drawbacks.

Available in Next.js, it allows developers to generate and serve static pages, but also to update and regenerate these pages incrementally on-demand, instead of building every page at once during build time. With ISR, the pages are built and served statically, but they can also be updated with new data whenever required, without the need to rebuild the entire application.

This approach offers the benefits of Static Site Generation, like fast loading times and reduced server load, while also providing the flexibility of Server Side Rendering, as the pages can be updated with the latest data when needed. This can be especially beneficial in applications where the content changes frequently or when building large-scale applications with thousands of pages.

Some key points to consider when using ISR are:

  • The initial loading of the page remains fast, as it serves pre-built static content.
  • It offers a scalable solution for applications with dynamic content or large numbers of pages.
  • The server load is reduced compared to traditional SSR, as the regeneration process happens incrementally and on-demand.

Wrapping up

In summary, both SSG and SSR have their pros and cons when it comes to web development. Choosing between the two depends on the specific requirements of your project.

For sites with static content, such as blogs or marketing sites, SSG is an ideal choice. On the other hand, for web applications with dynamic content and user interactions, SSR might be the better option. If you have a large application with constantly changing content, ISR would be worth investigating.

Sanity's seamless integration with popular SSG, SSR and ISR frameworks, like Next.js, Gatsby.js, Nuxt.js, and Hugo, makes it an ideal choice for modern web development projects. By understanding the differences between SSG and SSR and leveraging the powerful features of Sanity, web developers can make better architectural decisions and ultimately provide better value for end-users.

Page content

  • Demystifying Static Site Generation (SSG)
    • The upsides of SSG
  • Deciphering Server-Side Rendering (SSR)
    • The benefits of SSR
  • Comparing SSG and SSR
    • Popular SSG and SSR frameworks
  • Sanity: Seamless integration with SSG and SSR
    • Integration with Next.js
    • Integration with Gatsby.js, Nuxt.js, and Hugo
  • But what about ISR?
  • Wrapping up

Categorized in

  • Composable architecture

More on this topic

  • Tutorial: Make a blog with Next.js, React, and Sanity

    Blog post

    Tutorial: Make a blog with Next.js, React, and Sanity

  • The Composable Stack: 5 Frontend Frameworks To Consider

    Article

    The Composable Stack: 5 Frontend Frameworks To Consider

  • Here's to learning new things! Next.js 13 & Sanity Studio v3

    Blog post

    Here’s to learning new things! Next.js 13 & Sanity Studio v3

Product

Sanity StudioAPIsContent LakeSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

DocumentationBlogResource libraryCase Studies
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
  • Next.js blog
  • Next.js personal website
  • Clean Next.js + Sanity app
  • Clean Remix + Sanity app
  • Clean SvelteKit + Sanity app
  • All Templates
  • Agency partners
  • Technology partners
  • Headless CMS 101
  • What is an API CMS
  • Static Sites 101
  • Headless Commerce 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • Content as a Service
  • What is a DXP?
  • Typescript 101
  • Ecommerce SEO
  • CMS for enterprise
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServicePrivacy PolicyAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023