Production-Grade Next.js

Server Side Props Q&A

Scott Moss

Scott Moss

Superfilter AI
Production-Grade Next.js

Check out a free preview of the full Production-Grade Next.js course

The "Server Side Props Q&A" Lesson is part of the full, Production-Grade Next.js course featured in this preview video. Here's what you'd learn in this lesson:

Scott answers student questions about how to get refresh tokens for Next-auth.js and if getServerSideProps is hit every time or if client side routing is used.


Transcript from the "Server Side Props Q&A" Lesson

>> I think it also added a sign out here, so you can click your name. If you follow along, you did the GitHub thing, you should see your picture here and your GitHub name and email, you should be able to sign out like that.
>> How would I go if I want to refresh the token?

>> So if you wanna refresh the token, that's a nasty experience, right? Now you've gotta click here and Sign in again, if I just need to read like Heroku Heroku does a refresh, and it's really nice. I like that, there is no automatic support for token refreshes in the next auth, you have to manually set it up using their callbacks.

And I could kind of show you how you can do that but it's still pretty simple. You just yeah, it's not it's not too difficult because I'm pretty sure they don't have an automatic one not that I know of. Let me see, look, that's the course right there, how do I get a refresh token?

Like literally right there, so it's a thing. It's just a little process you have to add, so yeah, not too difficult. So the question was, does the server, when I have a page that has server side props, does the server side props function get hit every time, or when I'm on the client side, do I, am I actually using client side routing out right without a question?

Okay, a couple things there, so, let's talk about the server side props, server side props is going to be executed every single time you go to this route, every time. It's never not gonna go here, so let's try it out, so I'm gonna go to sign in. And then we can go look at the terminal here.

You can see I got hit right there and I will refresh it a couple times. One, two, three, you can see I got hit three times. But that's a full refresh. Let's actually navigate and try it. So if I go here, which is the home, click back on dashboard, which navigates to the app.

You can see it did it another time, okay. So service I promise is always going to be executed because it's server render, that's the full stack part. But depending on how you link between your routes, and the key word here is link. Like for instance, if I go to my index, you can see that or not index i guess it's top nav.

Or home and home. Now you can see I'm using this link component from next link. If I use this component, this is going to give me client side rendering. So you can see right here by using this component and navigating to blog, it's gonna be a client side render whereas if I just used an anchor tag and went straight.

And I just added the URL here that won't be a client side render, it's gonna be a full server side render, which is for better for worse and it might not be what you're trying to do, I'm not sure but if you use the next link, you opt into, like prefetching it'll prefetch this if it's static before you even click on it, so it's ready to go.

They'll do different things like that. So it really depends on how you route is going to determine the behavior of whether you're doing a full request to the server versus client side routing. But none of that really matters if the page you're routing to has server side props.

Cuz it's gonna hit that server anyway, that page has to be served on server side props, no matter how you route to it. It's always going to serve that, so this is mostly just for like, if you have like a hybrid page, where it's like okay It's server side rendered, or maybe it's statically built at build time.

But I'm doing some client side stuff to address some hooks in there. I'm doing some API calls inside the JSX, I'm doing some heavy client side stuff. So I want that to be snappy. So then yeah, you're probably using next link to link to that because if you didn't, and you did an anchor tag It's gonna go load up that whole page that that whole document all over again, the index, HTML, everything, and then you're going to wait for your JavaScript to load in.

Whereas if you just did this, it'll just swap out the part where the route is, right? So, yeah, it really depends on how you link.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now