Want to use getServerProps instead of getInitialProps, but how to implement server side redirect?

[oran1248]

Hi,

Today, I'm performing authentiocation checks of a page in getInitialProps. if the user is not authenticated, i'm redirecting him to another page.
I read the documentation of getServerProps and saw the recommendation to use it and not getInitialProps.
But, how can I implement server side redirect with getServerProps?
Of course I can't use both in the same page.
Maybe it is fine to use some wrapper HOC to the Page component and there define getInitialProps?

thanks!

[jamesmosier]

You are able to redirect in getServerProps the same as you would in getInitialProps:

export async function getServerSideProps(context) {
  if (context.res) {
    // server
    context.res.writeHead(302, {
      Location: '/',
    });

    context.res.end();
  }

  return {
    props: {}, 
  };
}

[oran1248]

So it's not good, because now getInitialProps redirects the user

[jamesmosier]

I'm not understanding. Could you provide a code sample that outlines what you are asking?

[oran1248]

Of course, now i have this code:

UserPage.getInitialProps = async (ctx) => {
    if(...user is not authenticated...){
       redirectToMainPage();
    }
}

this works for both client transition and server (when user enters page's url in the address bar).
As i see it, with getServerSideProps i can't achieve this behavior.

[Vadorequest]

Maybe, you can.

getServerSideProps is called from the server only, but during client side transition it's called too (from the server, through an internal invisible ajax call).

So, you may be able to do something similar even for client side redirections.

Alternatively, you can handle that in the render method.

[oran1248]

If i'm redirecting in useEffect, it will send the request for getServerSideProps although it will get "Access denied" or something like that. I'm trying to figure out what is the best way, because it's not clear from the documentation. And the case i'm talking about here is very common...

[devknoll]

IMO you should consider something like:

function UserPage({ authenticated }) {
  React.useEffect(() => {
    if (!authenticated) {
      Router.push('/login');
    }
  }, [authenticated]);
}

UserPage.getServerSideProps = async (ctx) => {
    if(...user is not authenticated...){
       return { props: { authenticated: false } };
    }
    return { props: { authenticated: true, /* ... */ } };
}

[Vadorequest]

getInitialProps is not deprecated and has valid use-cases, yours may be one.

You cannot redirect from the server when the request comes from the client through Ajax, that's why @devknoll returned { authenticated: false } so that the redirection may happen on the client side.

[oran1248]

I didn't say it's deprecated. But I'm talking about a common use case here, so I guess there is another way to achieve that. About @devknoll code, sorry i thought he used getinitialprops

[devknoll]

(I did have getInitialProps initially, but it was a typo 😅 . Sorry about that.)

[oran1248]

Now I have some HOC that wraps my Page component, for example: withRedux, withToken etc.. can I leave them and use getServerSideProps on the Page component?

[timneutkens]

Opened a RFC for redirecting here: #14890