getServerSideProps: Query Params undefined on direct Route hit or page refresh
Answered
Istrian Coarse-haired Hound posted this in #help-forum
Istrian Coarse-haired HoundOP
Hello,
for a product detail page i am using getServerSideProps to fetch data by a product handle. This is my fetching strategy:
export const config = {
runtime: "experimental-edge",
};
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
try {
// get handle from url
const { productHandle } = context.query;
if (!productHandle) {
return {
redirect: {
permanent: false,
destination: "/shop",
},
};
}
}
Locally, it works fine when both visiting the page through a <Link> Component or a direct hit. Also, refreshing works fine.
However, in Production (Netlify) with a direct hit or refresh, productHandle keeps being undefined.
What can I do? Client-side fetching is not an option as we need the data for SEO tags.
for a product detail page i am using getServerSideProps to fetch data by a product handle. This is my fetching strategy:
export const config = {
runtime: "experimental-edge",
};
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
try {
// get handle from url
const { productHandle } = context.query;
if (!productHandle) {
return {
redirect: {
permanent: false,
destination: "/shop",
},
};
}
}
Locally, it works fine when both visiting the page through a <Link> Component or a direct hit. Also, refreshing works fine.
However, in Production (Netlify) with a direct hit or refresh, productHandle keeps being undefined.
What can I do? Client-side fetching is not an option as we need the data for SEO tags.
Answered by Istrian Coarse-haired Hound
Thank you for the tip. It has indeed something to do with the edge runtime. I removed the "experimental-edge" config and now it is working.
3 Replies
@Istrian Coarse-haired Hound Hello,
for a product detail page i am using getServerSideProps to fetch data by a product handle. This is my fetching strategy:
export const config = {
runtime: "experimental-edge",
};
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
try {
// get handle from url
const { productHandle } = context.query;
if (!productHandle) {
return {
redirect: {
permanent: false,
destination: "/shop",
},
};
}
}
Locally, it works fine when both visiting the page through a <Link> Component or a direct hit. Also, refreshing works fine.
However, in Production (Netlify) with a direct hit or refresh, productHandle keeps being undefined.
What can I do? Client-side fetching is not an option as we need the data for SEO tags.
this smells like a netlify issue, have you tried asking at say https://github.com/netlify/next-runtime/issues?
Istrian Coarse-haired HoundOP
Thank you for the tip. It has indeed something to do with the edge runtime. I removed the "experimental-edge" config and now it is working.
Answer
@Istrian Coarse-haired Hound Thank you for the tip. It has indeed something to do with the edge runtime. I removed the "experimental-edge" config and now it is working.
Then it’s a bug of netlify edge runtime, do report this to the netlify team