Partial SSG

[tomevans18]

Hi all,

Our main application requires several translations per page and by utilising dynamic routes we are able handle which translation should be loaded. The setup is as followed pages/[languageCode]/about.tsx.

To improve the initial page load UX and client side routing we are also utilising static site generation, looping though the available languages to generate a version of each page per language. This results in the following build tree:

- en
  - about.html
- fr
  - about.html
- dl
  - about.html

This setup works well as we can provide all the main elements, e.g. buttons, navigation bar, etc. in the correct language on initial load and then lazy load any dynamic data client side using a skeleton UI approach, much like Vercel's dashboard experience.

The complication we have discovered with this approach is when there are sub dynamic route when the value is unknown at the time of build e.g. pages/[languageCode]/customers/[customerId]

In this situation we could statically generate a version with an "unknown" customer ID and then set the fallback option as true to generate static versions of these customer pages on the fly. This would look like the following:

export const getStaticPaths: GetStaticPaths<DynamicPageProps> = async () => {
  const paths = availableLanguages.map((language) => ({
    params: { language, customerId: "unknown" },
  }));

  return { paths, fallback: true };
};

export const getStaticProps: GetStaticProps<
  DynamicPageProps,
  DynamicPageProps
> = async ({ params }) => {
  return { props: params };
};

Although this solves our issue, it does highlights an important missing feature that would vastly improve the applications optimisation, this being partial static site generation.

With the current implementation we quickly hit several million static pages being generated on the server with all sub dynamic route files having the same in content, this being the language variant + a loading skeleton UI. This is because we have ~40 pages with 5 language versions and around 5000+ lower level dynamic route variations (the lower level dynamic pram is only used in the dynamic data API call).

For this reason we believe a partial site generation would be a welcome addition to the Next.js tooling and would vastly optimise the framework. With partial site generation the above dynamic static site generation server side could be vastly reduced.

Taking our previous example of pages/[languageCode]/customers/[customerId] if we could choose the dynamic parameters to ignore we could simply output the following with no need to generate versions on the server:

- en
  - /customers/[customerId].html
- fr
  - /customers/[customerId].html
- dl
  - /customers/[customerId].html

Please let me know your thoughts as this would really help us transition a very large legacy application into a Next.js setup.

[jesstelford]

For a related feature request Issue: #14200