Making our startup's homepage search statically fast - A simple way using static speed and Next.js ⚡

I've been rebuilding the homepage at our startup Stackfix, ahead of our upcoming public launch.

The homepage search is the first thing users see. So, we want it to load as fast as possible. We also want this search to use data from our database, letting users to search through all products and the features on our site.

At Stackfix, we use Next.js. Fortunately, there's something that Next.js does - with a boring name - which is powerful and makes this easy: Static Site Generation (SSG).

In one-line: SSG means that Next.js statically generates your homepage while also fetching data from your database when you deploy.

This means that the homepage loads as fast as a static site, but also includes data from your database in JSON format of which you took a snapshot at build time. In contrast, my most used python framework, Django, doesn't do this.

(Edit: Our launch did well on Product Hunt - we got Product of the Day 🎉)

How we use this at Stackfix for the homepage search

1. During build time (while deploying on platforms like Vercel), Next.js calls getStaticProps when building the homepage.

This is what our getStaticProps code looks like for the homepage search:

export async function getStaticProps() {
  const data = await fetchDataFromDatabase();
  return { props: { data } };
}

<rest of your page that uses your props>

This function retrieves data from our database at build time. Meaning that the data is fetched once, and then the generated HTML is served as a static site.

This is why our homepage search loads so fast, and why the search is so fast: When you visit the homepage, you're not waiting for data to be fetched from the database. And you're essentially searching through pre-loaded JSON on the client-side.

The result? Extremely fast loading since the data exists as JSON directly on the page when clients download your application.

Things we watch out for when building our homepage search using Next.js's SSG

The obvious question: Doesn't your data become outdated between the time that you build the homepage and the time that the user visits the homepage? The answer is yes.

We handle this neatly by default due to the well-designed data model that [Camin built], but there are two techniques to mitigate data becoming outdated:

1. You could add client-Side fetching as well

For dynamic data that needs to be fresh, we could add client-side fetching in addition to the SSG on our homepage search. To show our requirements, the user needs to select a category first. So, we could fetch the requirements for the selected category on-demand. This delay would be imperceptible if timed with user interactions.

1. The neater way: use Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) is another really easy-to-use, built-in Next.js feature. Essentially, this involves setting a timer by when our homepage data should be re-fetched, and then re-inserting this data into the static homepage search. This would be complicated to do manually. But Next.js reduces it to 2 words:

Here's how it looks:

export async function getStaticProps() {
  const data = await fetchDataFromDatabase(); 
  return { props: { data }, revalidate: 10 }; 
}

Did you notice the revalidate: 10 ? ISR is that simple.

So, when a user visits after the timer expires, this ISR does the following:

1. Serves the current static page
2. Triggers a background rebuild of that specific page
3. Updates the static content with fresh data
4. Shows future visitors the updated content

There's no waiting time. Next.js fetches just the data for the page that was requested, and then inserts the new data into your static page.

This means that in our Stackfix homepage search, we use SSG for category and requirement data. The approach works well because:

• User experience is extremely smooth and fast, just how we like it

• Most data changes are additive (new categories/requirements)

• Removals are handled gracefully