Your Privacy

This site uses cookies to enhance your browsing experience and deliver personalized content. By continuing to use this site, you consent to our use of cookies.
COOKIE POLICY

Static Generated Sites at a High Level

Static Generated Sites at a High Level
Back to insights

Statically generated sites are becoming more popular on the modern web because they are very secure and offer fast page load times. They can be much quicker than server-side rendered applications or applications with dependencies on remote APIs (application programming interfaces) to load meaningful content into the view. While historically static sites have been difficult to manage, today, we have several tools like Gatsby, Next.js, and Nuxt.js to help manage static content. Let’s explore how static site generators can take raw data and create a fully functioning website.

The Data 

Data for statically generated sites can come from various sourcesMost statically generated sites can consume Markdown, a specialized way to format a rich textThis type of content is great for authoring articles or sections of content on a websiteMarkdown also has full support for embedding images and hyperlinks. 

Other common data sources include RESTful APIs, REST (Representational State Transfer) like APIs, and GraphQLAll of these scenarios involve serving up application data using HTTP/HTTPS requests. You may be thinking, How can a static site use an API? I thought you said earlier using an API might be slow. Static sites pull that data before the users see it, so they do not have to waitunlike traditional applications consuming APIs. 

Data can come in almost any formatBut how do we translate that data into a static siteEach static site generator comes with a way to build or reuse modules with consumed dataFor example, in Gatsby, this is source plugin (Nuxt, Next, etc.). These source plugins digest the content and provide it to the static site generators to be consumed later. This process informs the site of what content is available. So, where do we put this data from the source plugins? One word – templates. 

Templates 

Static site generators can define many types of templates. This is generally where a lot of the custom display code makes your website look the way it is supposed toTemplates are skeleton display codes with placeholders for custom data to be inserted (page header, navigation, etc.) Its like having a generic form ready to be filled in with custom data. 

Building 

These source plugins supply the data, and we have these templates, but how do we get a webpage on someone’s screenThat is where the build step comes in and where things can get trickyStatic site generators have a method of injecting the raw data collected by the source plugins into your templates and outputting raw HTMLThis is known as the build processYou may be thinking, Whats the catch? Building can be expensiveBuild times vary based on how much content you have on your websiteIf you have thousands of records to be processed, this can take some timeFortunately, static site generators are starting to mitigate this time cost and allow you to build the site incrementally. This allows you to rebuild only the sections of the site that have changed. 

There is certainly a tradeoff, but you will save your customer the time it takes for a server-side application to render the page. It may take longer to make the initial changes to your site, but you will save on every page load when the user is looking at the site providing your customer with a better experience. 

Publishing 

Once a site is built, all the artifacts can be published to allow users to interact with the content.  The statically generated site can be published to a content delivery network (CDN) like Netlify, Surge.sh, or GitHub for virtually no cost and incredibly fast response timesCDNs are usually set up with distributed data centers, so your website will scale well across the worldThis is a huge win since you will not have to stand up expensive application servers in Azure or Amazon Web Services to host your app. 

 

Digging In

  • Digital Products

    The Growing Importance of Digital Accessibility

    Embracing Digital Accessibility: A Moral and Business Imperative In today’s digital landscape, accessibility has become crucial for businesses and organizations. With increasing awareness and legal requirements, ensuring that digital products are accessible to all users, including those with disabilities, is not just a compliance issue but a moral imperative. At UDig, we champion ADA compliance […]

  • Digital Products

    Unlocking Business Potential: The Power of Custom Application Development

    Like any savvy business leader, you’re likely always on the lookout for tools to give your company a competitive edge. And in doing so, you’ve undoubtedly considered investing in custom application development. But the question is, how do you ensure that such a major investment in a custom web application development provides a strong return on […]

  • Digital Products

    Mastering Legacy Application Modernization: Strategies for Success

    The ironic truth of the business world is that change is the only constant. But this means that failing to keep pace with the competition and its technologies will only end with you falling behind. That’s where legacy application modernization enters the fold. When you modernize legacy applications, your team gains access to new features […]

  • Digital Products

    CTO Confessions Podcast

    In this episode of CTO Confessions, Rob Phillips, the Vice President of Software Engineering at UDig, digs into his journey from a passionate technologist in his youth to a seasoned leader in the tech industry. He shares valuable lessons on transitioning to senior leadership, the importance of understanding and articulating company problems, and the art of empowering teams for high performance.

  • Digital Products

    Navigating the Challenges of On Premise to Cloud Migration

    In today’s rapidly evolving technological landscape, the shift from on premise solutions to cloud-based infrastructure has become a pivotal transformation for organizations seeking to modernize their IT operations. This transition holds the promise of increased agility, cost savings, and enhanced scalability. However, it is not without its set of formidable challenges that organizations must navigate. […]

  • Digital Products

    The Power of Transferrable Skills in Tech Projects

    Every project has its own unique elements that require flexibility to be effective and achieve success. This often requires picking up new pieces of a tech stack, learning a new programming language, or a new project methodology. Fortunately, there are also many transferrable skills that carry over from one project to the next. In my […]