How to handle dynamic authorization-based content in Next.js with getStaticProps or getServerSideProps?

Question

I am building a Next.js application where I need to fetch and display content based on the user's authorization status. I initially used getStaticProps to fetch and cache the content at build time. However, I realized that the cached content is served to all users, regardless of their authorization status. This poses a potential security risk as unauthorized users might see sensitive content.

To address this issue, I considered using getServerSideProps instead, as it generates the content on each request, allowing me to check the authorization status dynamically and serve the appropriate content. However, I am unsure about the best approach to handle this situation.

Here is an example of what I have tried using getServerSideProps:

import { useRouter } from 'next/router';

export async function getServerSideProps(context) {
  const { authorization } = context.req.headers;
  const { id } = context.query;

  // Check the authorization value
  if (authorization === 'valid_token') {
    // Fetch authorized content based on the ID
    const authorizedData = await fetch(`https://api.example.com/authorized/${id}`);
    const authorizedContent = await authorizedData.json();

    return {
      props: {
        content: authorizedContent,
      },
    };
  } else {
    // Fetch unauthorized content based on the ID
    const unauthorizedData = await fetch(`https://api.example.com/unauthorized/${id}`);
    const unauthorizedContent = await unauthorizedData.json();

    return {
      props: {
        content: unauthorizedContent,
      },
    };
  }
}

function MyPage({ content }) {
  // Render the content based on the authorization status
  return (
    <div>
      <h1>My Page</h1>
      <p>{content.title}</p>
      <p>{content.description}</p>
    </div>
  );
}

export default MyPage;

I would appreciate any guidance on the following points:

1. Is using getServerSideProps the correct approach to handle dynamic authorization-based content in Next.js?

2. Are there any potential drawbacks or performance implications of using getServerSideProps instead of getStaticProps in this scenario?

3. Is there a more efficient or alternative way to handle dynamic authorization-based content in Next.js? Any help or suggestions would be greatly appreciated. Thank you!

Answer 1

As you have already discovered for your self, getStaticProps is not the way to go when working with dynamic content or content that relies on cookies or headers as related pages are generated at build time and do not render on each request.

---

Is using SSR the correct approach to handle dynamic content?

Definitely, if possible keep your authorization on the server only, this ensures that your tokens and secrets never get leaked to the client. Generally speaking this technique is especially recommended when the data cannot be statically generated before a user request takes place, and at the same time needs to be available to search engines.

Are there any potential drawbacks or performance implications of using SSR?

Think of it this way, as long as your data has not been fetched the page can not be displayed and the user will see a blank screen. When using SSR it is really important to cache content whenever possible and ensure that any external API's you are requesting are fast enough to be used in production.

Note that your shared bundle size and First Load JS will play a big role in performance, no matter the rendering method used. The First Load JS bundle is all the code shared or used by the app pages at initial load.

Is there a more efficient or alternative way to handle dynamic content in Next.js?

Using the pages directory there is not no.

But the app directory supports instant loading UI's, basically fallback UI that is shown immediately upon navigation. You can pre-render loading indicators such as skeletons and spinners, or a small but meaningful part of future screens such as a cover photo, title, etc. This helps users understand the app is responding and provides a better user experience.