Web Evolution & Static Site Generation (SSG) with Next.js

Credits: https://www.intuz.com/top-static-site-generators

The web has undergone significant evolution over the years since its inception in the 1990s. Here are some major milestones in the evolution of the web:

Evolution of the Web over the years

The Web 1.0 (1991–2004) phase was characterized by static HTML pages and the first web browsers like Mosaic and Netscape Navigator.

Websites were mostly informational and lacked interactive features. This involved a simple browser that fetches static HTML pages from a server without any dynamic capabilities.

The Web 2.0 (2004–2010) phase where the advent of dynamic websites and new technologies like AJAX and JavaScript, web 2.0 brought about a new era of interactive and user-driven web experiences.

Social networking sites like Facebook and Twitter emerged during this time, and online collaboration and sharing became more prevalent. This involved an enhanced browser that interacts with a server holding dynamic capabilities.

The Web 3.0 (2015-present) phase is characterized by the emergence of new technologies like artificial intelligence, machine learning, and the Internet of Things (IoT). This phase changed the whole perspective of how we look at web architecture and made it more resilient & powerful.

Now the client browser here became super powerful with great processing capabilities example the introduction of SPA like React & Angular.
On the server side, we shared the responsibilities into multiple layers which included the following,

1. A CDN that serves our static assets.
2. A Load balancer that manages the high traffic coming in and based on the server availability would delegate the same accordingly.
3. A Microservice architecture that included multiple clusters of different servers that served a particular purpose hence increasing the reliability and availability of data across regions.

Pain points with traditional web

There are several pain points associated with traditional web development, especially when it comes to building large and complex applications. Here are a few common pain points:

1. Slow page loading times: Traditional web applications often suffer from slow page loading times, which can lead to poor user experience and high bounce rates.
2. Server-side maintenance: Traditional web applications require dedicated server-side resources to run and maintain, which can be expensive and time-consuming.
3. Limited scalability: Traditional web applications often struggle to scale efficiently, especially during traffic spikes or when faced with increased user demand.
4. Security vulnerabilities: Traditional web applications can be vulnerable to a variety of security threats, including cross-site scripting (XSS) attacks, SQL injection attacks, and more.
5. Complexity: Building and maintaining large traditional web applications can be complex and require a significant amount of time and resources.

To address these pain points, developers are turning to alternative architectures which offer greater scalability, improved performance, and simpler maintenance.

Static Site Generation (SSG)

Static Site Generation (SSG) is the process of generating a static HTML-based website from source files, typically written in a markup language like Markdown or HTML. This process is done at build time, and the resulting HTML files can be served directly to clients without any server-side processing.

SSG is a popular approach in modern web development, especially for content-driven sites like blogs, portfolios, and e-commerce sites. With SSG, the website can be hosted on a Content Delivery Network (CDN) for fast delivery and improved performance. The website is also more secure, as there is no server-side processing or database access required, reducing the attack surface.

SSG can be accomplished using a variety of tools and frameworks, including Gatsby, Hugo, Jekyll, and Next.js, among others. These tools use different approaches to generate static sites, but all share the common goal of pre-rendering pages at build time to improve performance and security.

The greatest difference between a static site generation & a traditional web application stack is that instead of waiting until is page is requested and then generating its view on demand each time, a static site generator does this in advance so that the view is ready to be served ahead of time & it does so for every possible view of a site at build time.

Think of a static site generator as a script which takes in data, content and templates, processes them, and outputs a folder full of all the resultant pages and assets.

SSG Advantages

Using the SSG strategy we can gain the following benefits:

1. Static is consistently and predictably fast as the HTML is already compiled and ready to be served. (Good SEO).
2. Static is always online. Whether your backend or database exists or not, its availability will not affect your existing pre-rendered page.
3. Static minimizes backend load which eventually reduces Infra cost.
4. Easy maintenance using Version Control to roll back to any version of the site in the GitHub commit history.
5. Scalable, with cached versions of your site all around the globe, sites can scale up fast and handle giant volumes of traffic at once.
6. Security, Since SSGs are rendered in advance, this leaves much less scope for any cyber attack.

SSG Disadvantages

While Static Site Generation (SSG) has several advantages, there are also some potential disadvantages to consider. Here are a few:

1. Limited interactivity: Static sites are limited in terms of interactivity compared to dynamic sites. They can’t provide real-time updates, like live chat, and require a page refresh to update content.
2. Development complexity: SSG can be more complex to set up than traditional server-side rendering. It requires a build step, which can make development workflows more complex.
3. Dynamic content: If the site requires frequent updates or has dynamic content, it may be challenging to maintain a fully static site. This can be addressed by using client-side JavaScript to fetch and display dynamic content, but this can add complexity to the site.
4. Scaling issues: If the site requires frequent updates, generating a new static site with each update can become time-consuming and inefficient. This can be addressed with incremental builds, but this adds complexity to the build process.
5. SEO limitations: While static sites are generally SEO-friendly, some search engines may penalize sites that have limited interactivity or frequent changes.

Despite these limitations, SSG remains a popular approach for content-driven websites, as it offers improved security, performance, and scalability compared to traditional server-side rendering.

SSG Example using Next.js

Here’s a simple code example of a Next.js web application using SSG:

1. Create a new Next.js app:

npx create-next-app my-ssg-app
cd my-ssg-app

2. Create a new file named index.js in the pages directory:

// pages/index.js

function Home(props) {
  const { posts } = props;
  return (
    <div>
      <h1>Latest Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  // Fetch posts from an API
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return {
    props: { posts },
  };
}

export default Home;

3. In this example, the getStaticProps function fetches posts from an API and returns them as props to the Home component. This function is called at build time, and the results are used to pre-render the HTML for the Home page.

4. Start the app

npm run dev

5. Visit http://localhost:3000 to see the rendered HTML for the Home page.

This is a simple example of how SSG works in Next.js. When the app is built, the getStaticProps function is called to fetch the data, and the resulting HTML is pre-rendered and served to clients. This approach offers improved performance and security, as the site is served as static HTML files, rather than being dynamically generated on the server.

That’s it for this article hope you would have learned something useful from it. So If you have any thoughts or suggestions, feel free to leave a comment below. Don’t forget to share your love by clapping for this article as many times as you feel like.

You can follow me on Twitter, Github, LinkedIn, and Facebook.

Happy Coding 👨‍💻 🎊.