I'm creating a react app and I'm thinking of using NextJS for a better SEO. I would like to know if there's a way to return a different static page based on the logged status of the user (if it's logged in or not).
If the user is authenticated: Return a static page with a spinner / skeleton, reuse the static page for other requests from authenticated users and fetch the back-end data from the client side.
If the user isn't authenticated (like a crawler): Return a static page with the data already fetched and reuse the static page for other requests from unauthenticated users.
(I want to generate static pages for a better performance to both the user (and search engines) and the server (less database queries))
I want to do the above for the same url.
It seems I already can do that for 1 of those cases with Incremental Static Regeneration
choosing a reasonable value for revalidate (like 1 minute or 5 minutes) and use fallback = true for pages that have different ids (like /posts/[postId]), together with getStaticProps().
I probably would be able to handle both cases if I used a slug in the url path to identify if the user is authenticated or not (example: /[authSlug]/posts/[postId], like in /authenticated/posts/1 and /unauthenticated/posts/1.
Unfortunately, I haven't found a way to be able to achieve the above scenario using the same url for generating static pages dynamically (instead of SSR, that generates a different page at each request).
It's probably possible if I use a reverse proxy in the middle that proxies requests to the NextJS server based on the authentication state of the user, going to different paths in the NextJS server without changing the url for the user, but I would like to avoid such an approach if possible (it could cause problems for routes accessed inside the site from the client side).
Is there a way to achieve what I want like I explained above?