Thoughts on global SSR components?

[mwisner]

This is more of a general question, not an issue.

I'm currently working on implementing next-iron-session in my project. (thanks for the work btw it came at a perfect time for me) I see there is an SSR example for a single user-profile page, which I think works great, but I'm wondering what anyone's thoughts are on more global or site-wide SSR solutions.

We have an application layout being rendered in our custom _app.js page that includes some need for data stored in the session. Simple things like the application header showing "Welcome, XYZ" vs "Sign in"

Right now in order to accomplish this, I'm using something similar to the useUser hook. But on hard-refreshes the initial page is loaded as if there is no user logged in, then once the data is returned from the API it updates the page to reflect a logged-in user's view.

One approach (though I have no idea if it's a good one) that I've used in the past to take advantage of next-redux-wrapper and basically initialize the redux app state with data from req. Then read all the session data from redux. I had various issues with this approach around keeping the redux store and the actual session itself in-sync for changes.

I'm wondering if that is a "valid" approach, or if there is a better solution that you've found to avoid the redux stuff?

[vvo]

Right now in order to accomplish this, I'm using something similar to the useUser hook. But on hard-refreshes the initial page is loaded as if there is no user logged in, then once the data is returned from the API it updates the page to reflect a logged-in user's view.

To solve that you either have to:

• Use SSR, which can be less performant than static generation in Next.js (code will run for every customer request)
• Use a generic wording like "Your dashboard" (not per user) and when you click on it it goes to an API route like /api/login. If the cookie is present then you log the user in, otherwise you present them the login/signup page.
• Hide/show loader on the "login" text until you get the customer details

I am a fan of static generation so I am really fine with a text that turns from "login" to "welcome X", I don't think that's a big deal at all UI wise.

If you really want the server-side to already recognizes the user and send immediately the right data, then you have to use the SSR way (getServerSideProps) on every page OR you could try to use getServerSideProps or getInitialProps on the _app file directly like shown here: https://nextjs.org/docs/advanced-features/custom-app

And then forward the user data in the pageProps of every page.

I hope this helps. (My personal advice, go with static generation and use loaders, its fine)

[mwisner]

Thanks, @vvo! You're totally right. I spent some more time on this and ended up just following your advice and not worrying so much about it.

Thanks again for the great library.