Up to today all of our pages implemented getServerSideProps, now I got the task to refactor all instances of getServerSideProps for getStaticProps since all pages need to be statically generated.

I'm facing 2 problems so far:

1- Some data is dynamic, data fetching is being made inside the getServerSideProps function (call to api to retrieve data), so every time the user makes a request to the page, the most up to date data needs to be displayed. I've made some research and it seems that adding the revalidate property could fix that problem hence avoiding to fetch the data on the client-side (Does adding the revalidate property inside getStaticProps function is a whole replacement for fetching data on the client-side?)


2- Pages are protected based on whether the user is logged in with a valid account, this protection is being made inside the getServerSideProps function with getServerSession from next-auth, getServerSession requires the req and res properties from the context object which cannot be passed to getStaticProps, there's even some pages that require context.req.headers because we need to use the cookie.
I've made some research and I came across these posts, which one is better?:

- https://github.com/vercel/next.js/discussions/21431

Answer by bennetdams suggests using middlewares (https://nextjs.org/blog/next-12#introducing-middleware). However I don't seem to find any examples or tutorials of someone implementing this approach so I have no idea how to implement it on my case.

- https://stackoverflow.com/questions/72044693/handling-auth-inside-getstaticprops-requests

Answer shows how to implement authentication on the client side with <UserProvider> and the useUser() hook

What I'm looking for is guidance on the best approaches, resources, tutorials, etc, to solve these problems by changing the least amount of lines of code.
thank you so much in advance for any help!