NextJs's Link components do a full refresh about krabs HOT 4 CLOSED

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

from krabs.

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;

from krabs.

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?

from krabs.

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.

from krabs.