NextJs's Link components do a full refresh

[28development]

Hi again,

somehow the NextJs Link components do a full refresh, default NextJs applications does not have this behavior.
Not sure if that behavior is due to krabs.

In my case, I have the following setup

const navigation = [
  { name: 'Immobilien', href: '/real-estates', icon: FolderIcon, current: false },
  { name: 'Documents', href: '/documents', icon: InboxIcon, current: false },
  { name: 'Exports', href: '/exports', icon: ChartBarIcon, current: false },
]

    {navigation.map((item) => (
      <Link
        key={item.name}
        href={item.href}
        aria-current={item.current ? 'page' : undefined}
      >
        <a>
          <item.icon
            aria-hidden="true"
          />
          {item.name}
        </a>
      </Link>
    ))}

[micheleriva]

It's doing a full refresh 'cause you're using getInitialProps in your _app.js file right?

[28development]

Yes.

App.getInitialProps = async ({ Component, ctx }) => {
  const tenant = ctx?.req?.tenant?.name;
  let pageProps = {};

  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return {
    pageProps: {
      ...pageProps,
      tenant,
    },
  };
};

export default App;

[28development]

Using getServerSidePropsaswell as getStaticProps has the same effect.

export async function getStaticProps({ Component, ctx = null }) {
  const tenant = ctx?.req?.tenant?.name;
  let pageProps = {};

  if (Component.getStaticProps) {
    pageProps = await Component.getStaticProps(ctx);
  }

  return {
    pageProps: {
      ...pageProps,
      tenant,
    },
  };
}

Could you provide an example on how to solve this?

[micheleriva]

By using getInitialProps in your _app.js file, you require a full SSR for each page in your application. As for now, there's no way to avoid this behavior, but I have a suggestion: use a CDN such as Akamai or Cloudflare for caching your pages after the first render, and use their APIs for invalidating the cache manually or time-based (just like an "enhanced" ISR).

If you feel like wrapping your application behind a CDN is a bit too much, maybe Krabs it's not 100% needed 🙂 it is supposed to work on large-scale projects where a good caching layer is required anyway!

PS. I'm currently running Krabs in production on a two-domain application, and even if I SSR every single page, its performances (cache apart) are outstanding, and that's because Next.js is really well made.