Next.js getStaticProps与Apollo Client useQuery的差异及选型疑问

Hey there! Let's break down the difference between these two approaches and help you pick the right one for your use case.

First, let's recap your two working implementations for context:

Using getStaticProps #

export const getStaticProps: GetStaticProps = async ({ params }) => {
  let oneUserQuery = await client.query({
    query: ONE_USER_QUERY,
    variables: { id: params.id }
  });
  let user = oneUserQuery.data.userInfo;
  return {
    props: { user } // User data is available as component props
  };
};

Using useQuery in the component #

export default function User(props) {
  const route = useRouter();
  const { loading, error, data } = useQuery(ONE_USER_QUERY, {
    variables: { id: route.query.id }
  });

  if (error) return <div>Error loading one user.</div>;
  if (loading) return <div>Loading.....</div>;
  const { userInfo } = data;

  return (
    <Layout>
      {userInfo.id}
      <br />
      {userInfo.name}
      <br />
      {userInfo.email}
    </Layout>
  );
}

Core Differences Between the Two Approaches #

1. When Data is Fetched #

• getStaticProps: This runs at build time (or via Incremental Static Regeneration, more on that later) on your server/CI environment. It fetches the user data before the page is even sent to the client, generates a static HTML file with the pre-rendered content, and passes the data as props to your component. Users get a fully rendered page instantly when they visit.
• useQuery: This runs in the user's browser after the page loads. The client sends a GraphQL request to your server, waits for the response, then renders the content. Users will see a loading state while the data is being fetched.

2. Performance & User Experience #

• getStaticProps: Static pages can be cached by CDNs, so first-load times are blazingly fast. No client-side request means no waiting for data—users see content immediately. This is also great for SEO, since search engines can crawl the fully rendered HTML.
• useQuery: There's a noticeable delay between page load and content rendering (hence the loading state you have). However, this approach gives you real-time data—users always get the latest version when they visit, without needing a site rebuild.

3. Data Freshness & Updates #

• getStaticProps: By default, the data is frozen at build time. If the user's info updates, you'll need to rebuild your site to show the new content. That said, Next.js has a workaround called Incremental Static Regeneration (ISR)—add a revalidate parameter to getStaticProps (e.g., revalidate: 60) and Next.js will automatically regenerate the page in the background every 60 seconds, keeping data fresh without a full rebuild.
• useQuery: Data is fetched on every page load (or you can configure caching/polling with Apollo Client). This means updates show up instantly for users, no rebuild required. You can also easily add features like pull-to-refresh or auto-refresh intervals.

4. Use Case Fit #

Pick getStaticProps (or ISR) if:

• Your user data doesn't change frequently (e.g., public profiles that only update occasionally)
• You care about top-tier performance and SEO
• You don't need real-time data updates

Pick useQuery if:

• Your user data needs to be real-time (e.g., a user viewing their own profile that they just edited)
• The query depends on client-side information (like a user's auth token, which isn't available at build time)
• You want to avoid rebuilding your site every time data changes

Final Recommendation for Your User Profile Page #

If this is a public user profile that doesn't need instant updates, go with getStaticProps + ISR (add revalidate: 300 to refresh every 5 minutes)—you'll get the best of both worlds: fast static performance and fresh enough data.

If this is a page where users view their own profile (and need to see edits immediately), stick with useQuery—it's more flexible for client-side, user-specific data.

内容的提问来源于stack exchange，提问作者hamohuh