Client-side request to getServerSideProps returning {}
Unanswered
Netherland Dwarf posted this in #help-forum
Netherland DwarfOP
Hi everyone!
I have a page (code edited for testing purposes):
import AccountSettingsPage from '@scenes/AccountSettingsPage/AccountSettingsPage';
import Head from 'next/head';
export const getServerSideProps = async () => {
const userAuth0Id = 'auth0|648a0bad04fbfef826858ae9';
console.log('userAuth0Id', userAuth0Id);
const userId = 'auth0|648a0bad04fbfef826858ae9';
const companyId = 's6Lta52NGpeRjHszadzuF';
console.log('userId', userId);
console.log('companyId', companyId);
return {
props: {
userId,
companyId,
},
};
};
const AccountSettings = ({ userId, companyId }) => {
console.log(userId, companyId);
return (
#Unknown Channel
<Head>
<title>Account Settings</title>
<meta
name="description"
content="Account Settings for the application"
/>
</Head>
<AccountSettingsPage companyId={companyId} userId={userId} />
</>
);
};
export default AccountSettings;
And, when I enter through the URL, it works fine. But, when I enter through some <Link> interaction, for example, the companyId and userId get undefined, even if I can see the console.log on my server. The call for the server returns {}, as you can see in the image. And this just happens on Vercel, on my localhost it works.
I have the pageProps on the <Component {...pageProps}/>
I have a page (code edited for testing purposes):
import AccountSettingsPage from '@scenes/AccountSettingsPage/AccountSettingsPage';
import Head from 'next/head';
export const getServerSideProps = async () => {
const userAuth0Id = 'auth0|648a0bad04fbfef826858ae9';
console.log('userAuth0Id', userAuth0Id);
const userId = 'auth0|648a0bad04fbfef826858ae9';
const companyId = 's6Lta52NGpeRjHszadzuF';
console.log('userId', userId);
console.log('companyId', companyId);
return {
props: {
userId,
companyId,
},
};
};
const AccountSettings = ({ userId, companyId }) => {
console.log(userId, companyId);
return (
#Unknown Channel
<Head>
<title>Account Settings</title>
<meta
name="description"
content="Account Settings for the application"
/>
</Head>
<AccountSettingsPage companyId={companyId} userId={userId} />
</>
);
};
export default AccountSettings;
And, when I enter through the URL, it works fine. But, when I enter through some <Link> interaction, for example, the companyId and userId get undefined, even if I can see the console.log on my server. The call for the server returns {}, as you can see in the image. And this just happens on Vercel, on my localhost it works.
I have the pageProps on the <Component {...pageProps}/>
4 Replies
Sloth bear
import AccountSettingsPage from '@scenes/AccountSettingsPage/AccountSettingsPage';
import Head from 'next/head';
export const getServerSideProps = async () => {
const userAuth0Id = 'auth0|648a0bad04fbfef826858ae9';
console.log('userAuth0Id', userAuth0Id);
const userId = 'auth0|648a0bad04fbfef826858ae9';
const companyId = 's6Lta52NGpeRjHszadzuF';
console.log('userId', userId);
console.log('companyId', companyId);
return {
props: {
userId,
companyId,
},
};
};
const AccountSettings = ({ userId, companyId }) => {
console.log(userId, companyId);
return (
<>
<Head>
<title>Account Settings</title>
<meta
name="description"
content="Account Settings for the application"
/>
</Head>
<AccountSettingsPage companyId={companyId} userId={userId} />
</>
);
};
export default AccountSettings;what nextjs version are you using?
Netherland DwarfOP
13.1.1.
What I discovered is, if it is a page that I use the middleware, this behavior happens. If it's a page that I don't run the middleware, it works normally. Even if the middleware does nothing, just return the res.
What I discovered is, if it is a page that I use the middleware, this behavior happens. If it's a page that I don't run the middleware, it works normally. Even if the middleware does nothing, just return the res.
Netherland DwarfOP
I don't know if it helps, but on the network tab, it has two responses. The first one comes empty, the second one with data