title: Statically pre-render most popular queries with NextJS
body: <p>I am using NextJS to pre-render pages of the format:</p>
  <pre><code>./pages/folder/[variable].js
  </code></pre>
  <p>I have a set of some ~ 8000 possible values for [variable], so it is not practically feasible to statically generate all 8000 of these pages. Because of this, I use <strong>getSeverSideProps()</strong> whenever this page is loaded. Here is what that looks like:</p>
  <pre><code>export async function getServerSideProps(context) {
      const { variable } = context.params
      const { res } = context;
      // Caches response for 15 minutes on the server side
      res.setHeader('Cache-Control', `s-maxage=900, stale-while-revalidate`)
  
      const { data } = await axios.get(url + variable);
      return { props : {data} }
  }
  </code></pre>
  <p>In spite of there being over ~ 8000 values, the top 50 values contain ~90% of queries.</p>
  <p>Is there any way to statically pre-render these 50 values with something like <strong>getStaticPaths()</strong> and <strong>getStaticProps()</strong>, such that these particular 50 queries are faster to load?</p>
  <p>Secondarily, and less concerning, is that the list of the most common requests changes slightly over time. If there was a solution to dynamically determine this list of 50 values, that would be ideal (although is not strictly necessary).</p>