N
Nuxt•3mo ago
Tom

Redirect during SSR

const data = await useFetchWrapper(async () => {
    const person = await FETCH_DOC({ endpoint: 'people', slug: params.slug as string, query: { populate: { profiles: { status: true } } } });
    const id = person?.profile?.docs?.[0]?.id;
    let profile = null;

    if (id) {
        const doc = await usePayloadFetch({ endpoint: 'profiles', query: { where: { id: { equals: id } } } });
        profile = doc?.docs?.[0] || null;
    }

    if ((!person || !profile) && !query?.draft) await navigateTo(localePath('/'), { replace: true, redirectCode: 301 });
    if (isExternalLink(profile?.externalLink)) await navigateTo(profile.externalLink, { external: true, replace: true });

    return { person, profile };
});
const data = await useFetchWrapper(async () => {
    const person = await FETCH_DOC({ endpoint: 'people', slug: params.slug as string, query: { populate: { profiles: { status: true } } } });
    const id = person?.profile?.docs?.[0]?.id;
    let profile = null;

    if (id) {
        const doc = await usePayloadFetch({ endpoint: 'profiles', query: { where: { id: { equals: id } } } });
        profile = doc?.docs?.[0] || null;
    }

    if ((!person || !profile) && !query?.draft) await navigateTo(localePath('/'), { replace: true, redirectCode: 301 });
    if (isExternalLink(profile?.externalLink)) await navigateTo(profile.externalLink, { external: true, replace: true });

    return { person, profile };
});
I have this code that I expect to redirect if it doesn't find the data, however, during SSR it tries to render the page leaving the error: 
Cannot read properties of null (reading 'value')
Cannot read properties of null (reading 'value')
Do I have to find everywhere that relies on the data and add a conditional so that is goes through SSR?
5 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Tom. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When you use navigateTo during SSR in Nuxt, it performs a redirect by returning a special value from the setup function or middleware. However, if you continue to execute code after calling await navigateTo(...), the rest of your setup function will still run, which can lead to errors like Cannot read properties of null (reading 'value') if you try to access data that should not exist after a redirect. Best Practice:
After calling await navigateTo(...) during SSR, you should immediately return to prevent further code execution. This ensures that the redirect is respected and the rest of your logic (including any code that would access missing data) does not run. Example: 
if ((!person || !profile) && !query?.draft) {
  return await navigateTo(localePath('/'), { replace: true, redirectCode: 301 });
}
if (isExternalLink(profile?.externalLink)) {
  return await navigateTo(profile.externalLink, { external: true, replace: true });
}
if ((!person || !profile) && !query?.draft) {
  return await navigateTo(localePath('/'), { replace: true, redirectCode: 301 });
}
if (isExternalLink(profile?.externalLink)) {
  return await navigateTo(profile.externalLink, { external: true, replace: true });
}
By returning the result of navigateTo, you prevent the rest of the function from executing, which avoids the error you are seeing. You do not need to add conditionals everywhere you use the data—just ensure that after a redirect, your function exits early. This is the recommended pattern for SSR-safe redirects in Nuxt Docs: navigateTo. Summary:
- Always return after navigateTo in SSR to stop further execution. - This prevents errors from accessing data that should not be available after a redirect. - You do not need to add extra conditionals everywhere, just handle the redirect and return early. For more details, see the official documentation on navigateTo. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@545621973364113419> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Tom
TomOP•3mo ago
@kapa.ai That doesn't work at all.
kapa.ai
kapa.ai•3mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for your feedback. Based on the knowledge sources provided, here’s what is known about SSR redirects and handling missing data in Nuxt: - When you use navigateTo in a setup function or middleware, you must return its result to ensure the redirect is respected and further code execution is stopped. This is explicitly mentioned in the Nuxt documentation and several community answers (navigateTo docs, middleware docs). - If you do not return after calling navigateTo, the rest of your function will continue to execute, which can lead to errors if you try to access properties of null or undefined data. - The Nuxt docs and community answers do not mention an automatic way to prevent the rest of your code from running after a redirect. You must manually ensure that you return after a redirect to avoid such errors. Example from the docs: 
export default defineNuxtRouteMiddleware((to, from) => {
  if (!auth.value.isAuthenticated) {
    return navigateTo('/login')
  }
  // ...rest of your logic
})
export default defineNuxtRouteMiddleware((to, from) => {
  if (!auth.value.isAuthenticated) {
    return navigateTo('/login')
  }
  // ...rest of your logic
})
If you do not return, the rest of the logic will run, which may cause issues if the redirect condition was met (middleware docs). In summary:
You do need to ensure that after a redirect (with navigateTo), your function exits early. There is no built-in mechanism in Nuxt that will automatically prevent the rest of your code from running after a redirect in SSR. If you have code that relies on data that may not exist after a redirect, you must guard it appropriately or structure your logic so it does not run after a redirect. If you are still experiencing issues even after returning from navigateTo, the knowledge sources do not provide further troubleshooting steps for this specific scenario. You may need to review your code structure or seek additional help with a minimal reproducible example. If you need more details or have a specific error trace, please provide it, and I can check if the knowledge sources cover that scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@545621973364113419> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?