2 min read

NEXTJS_UNNEEDED_GET_SERVER_SIDE_PROPS

Catches usages of getServerSideProps that could use static rendering instead, improving the performance of those pages.
Table of Contents

Conformance is available on Enterprise plans

This rule will analyze each Next.js page's getServerSideProps to see if the context parameter is being used and if not then it will fail.

When using getServerSideProps to render a Next.js page on the server, if the page doesn't require any information from the request, consider using SSG with getStaticProps. If you are using getServerSideProps to refresh the data on each page load, consider using ISR instead with a revalidate property to control how often the page is regenerated. If you are using getServerSideProps to randomize the data on each page load, consider moving that logic to the client instead and use getStaticProps to reuse the statically generated page.

An example of when this check would fail:

src/pages/index.tsx
import { type GetServerSideProps } from 'next';
 
export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js');
  const json = await res.json();
  return {
    props: { stargazersCount: json.stargazers_count },
  };
};
 
function Home({ stargazersCount }) {
  return <h1>The Next.js repo has {stargazersCount} stars.</h1>;
}
 
export default Home;

In this example, the getServerSideProps function is used to pass data from an API to the page, but it isn't using any information from the context argument so getServerSideProps is unnecessary.

Instead, we can convert the page to use SSG with getStaticProps. This will generate the page at build time and serve it statically. If you need the page to be updated more frequently, then you can also use ISR with the revalidate option:

src/pages/index.tsx
import { type GetStaticProps } from 'next';
 
export const getStaticProps: GetStaticProps = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js');
  const json = await res.json();
  return {
    props: { stargazersCount: json.stargazers_count },
    revalidate: 60, // Using ISR, regenerate the page every 60 seconds
  };
};
 
function Home({ stargazersCount }) {
  return <h1>The Next.js repo has {stargazersCount} stars.</h1>;
}
 
export default Home;

Or, you can use information from the context argument to customize the page:

src/pages/index.tsx
import { type GetServerSideProps } from 'next';
 
export const getServerSideProps: GetServerSideProps = async (context) => {
  const res = await fetch(
    `https://api.github.com/repos/vercel/${context.query.repoName}`,
  );
  const json = await res.json();
  return {
    props: {
      repoName: context.query.repoName,
      stargazersCount: json.stargazers_count,
    },
  };
};
 
function Home({ repoName, stargazersCount }) {
  return (
    <h1>
      The {repoName} repo has {stargazersCount} stars.
    </h1>
  );
}
 
export default Home;
Last updated on June 13, 2024