Static Optimization Indicator, what is it really indicating?

[Dannymx]

As I was reading the docs, I found the description of the static indicator a little bit confusing:

When a page qualifies for Automatic Static Optimization we show an indicator to let you know.

My first question is: When I see this indicator in a page, does it mean my page is currently NOT statically optimized and it could be optimized by getStaticProps? If my assumption is correct, I think it would be better to show the indicator when your page is in fact already optimized, and the lack of indicator to show your page is not optimized.

Now, as I was working on a quick demo to test getStaticProps and getStaticPaths I realized the indicator is not consistent with what I see:

I have an index.js page and a [category].js page. The index page does exactly the same as the category so its code is the following:

export { default, getStaticProps } from "./[category]";

And [category].js has a getStaticProps and getStaticPaths to statically generate pages, but what I see is that on initial load of any of those pages I don't see the indicator, but as soon as I click any of the dynamic <Link>'s I see the indicator appear in the bottom right corner.

So my second question is, why I don't see the indicator on each initial load of any page, but as soon as I click links I see the indicator again?

This gif reflects the behavior I'm describing, you can see when I do a full refresh vs moving between pages clicking <Link>.

The code for [category].js is this, so far I don't think there's a problem with it:

import React from "react";
import { useRouter } from "next/router";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";
import { initializeApollo } from "../lib/apolloClient";
import { GET_CATEGORIES } from "../components/Navbar";
import MainLayout from "../components/Layout";
import ImageCard from "../components/ImageCard";

const Home = () => {
  const router = useRouter();

  const { data, loading, error } = useQuery(GET_BEERS, {
    variables: getVariables(router.query?.category),
  });

  return (
    <MainLayout>
      <div className="grid lg:grid-cols-4 grid-cols-2 gap-4">
        {!loading &&
          data.beers.map((beer, index) => (
            <ImageCard key={index} beer={beer}></ImageCard>
          ))}
      </div>
    </MainLayout>
  );
};

const GET_BEERS = gql`
  query getBeers($where: JSON) {
    beers(where: $where) {
      id
      name
      created_at
      image {
        url
      }
      category {
        name
        slug
      }
    }
  }
`;

export const getStaticProps = async (ctx) => {
  const apolloClient = initializeApollo();

  await Promise.all([
    apolloClient.query({
      query: GET_BEERS,
      variables: getVariables(ctx.params?.category),
    }),
    apolloClient.query({ query: GET_CATEGORIES }),
  ]);

  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),
    },
    unstable_revalidate: 1,
  };
};

export const getStaticPaths = async () => {
  return {
    paths: [{ params: { category: "ale" } }, { params: { category: "lager" } }],
    fallback: false,
  };
};

const getVariables = (category) => {
  return category
    ? {
        where: {
          category: {
            slug: category,
          },
        },
      }
    : {};
};

export default Home;

[jamesmosier]

Here is how it is determined if the indicator shows up:

next.js/packages/next/next-server/lib/router/router.ts

Lines 529 to 531 in 38bd1a0

	;(window as any).next.isPrerendered =
	appComp.getInitialProps === appComp.origGetInitialProps &&
	!(routeInfo.Component as any).getInitialProps

and here is the usage of it:

next.js/packages/next/client/dev/prerender-indicator.js

Lines 83 to 86 in 38bd1a0

	Router.events.on('routeChangeComplete', () => {
	isVisible = window.next.isPrerendered
	updateContainer()
	})

---

To answer your first question, when you see this indicator in a page it mean that it does qualify for Automatic Static Optimization.

As for your second question, it looks like the indicator is set when the router's change event is called. Therefore if the page is already statically generated the router does not run therefore the window.next.isPrerendered is not set yet. That's the way the code looks at least.