I am using apollo with next and recently I noticed that custom routes breaks SSR. Usually if you navigate through pages apollo caches the query and when you are on the page the next time, it serves everything from cache. However with custom routes, the cache is never used.

I also noticed that when I click on these pages, an error flashes in the console. But it goes away very fast and I wasn't able to copy it here.

Server.js

// 
   server.get('/about-us', (req, res) => app.render(req, res, '/about'));


   server.get('/about', (req, res) => res.redirect(301, '/about-us'));

Menu Click Handler

const navigate = link => () => {
        Router.push(link);
    };

Menu Items

export const menu = [
    {
        name: 'Home',
        url: '/',
    },
    {
        name: 'Catalogs',
        url: '/catalogs',
    },
    {
        name: 'Shop',
        url: '/shop',
    },
    {
        name: 'Wholesale',
        url: '/wholesale',
    },
    {
        name: 'About Us',
        url: '/about-us',
        prefetch: true,
    },
    {
        name: 'Contact Us',
        url: '/contact-us',
        prefetch: true,
    },
];

Based on a suggestion from nextjs spectrum I tried prefetching custom pages in the TopNav Component but it didn't work.

const prefetch = url => {
        if (process.browser) {
            console.log('prefetching these urls', url);
            Router.prefetch(url);
        }
    };

    useEffect(() => {
        menu.forEach(menuItem => {
            if (menuItem.prefetch) {
                prefetch(menuItem.url);
            }
        });
    }, []);

I am using apollo with next and recently I noticed that custom routes breaks SSR. Usually if you navigate through pages apollo caches the query and when you are on the page the next time, it serves everything from cache. However with custom routes, the cache is never used.

I also noticed that when I click on these pages, an error flashes in the console. But it goes away very fast and I wasn't able to copy it here.

Server.js

// 
   server.get('/about-us', (req, res) => app.render(req, res, '/about'));


   server.get('/about', (req, res) => res.redirect(301, '/about-us'));

Menu Click Handler

const navigate = link => () => {
        Router.push(link);
    };

Menu Items

export const menu = [
    {
        name: 'Home',
        url: '/',
    },
    {
        name: 'Catalogs',
        url: '/catalogs',
    },
    {
        name: 'Shop',
        url: '/shop',
    },
    {
        name: 'Wholesale',
        url: '/wholesale',
    },
    {
        name: 'About Us',
        url: '/about-us',
        prefetch: true,
    },
    {
        name: 'Contact Us',
        url: '/contact-us',
        prefetch: true,
    },
];

Based on a suggestion from nextjs spectrum I tried prefetching custom pages in the TopNav Component but it didn't work.

const prefetch = url => {
        if (process.browser) {
            console.log('prefetching these urls', url);
            Router.prefetch(url);
        }
    };

    useEffect(() => {
        menu.forEach(menuItem => {
            if (menuItem.prefetch) {
                prefetch(menuItem.url);
            }
        });
    }, []);

• javascript
• node.js
• express
• react-apollo
• next.js

• 1 When you run the code redirect the output to a file, so if an error occurs and is cleared, you will still be able to see it in the file. Make sure to redirect stderr and stdout both – Tarun Lalwani Commented Jul 8, 2019 at 1:57
• Try put "debbuger" [developer.mozilla/en-US/docs/Web/JavaScript/Reference/… above your console.log and it will stop execution and you'll be able to see the error – theCuriousOne Commented Jul 11, 2019 at 7:49
• Shouldn't server.get('/about-us', (req, res) => app.render(req, res, '/about')); be changed to /about-us to match the client side Next.js app route? – acupofjose Commented Jul 11, 2019 at 12:22
• Please provide a minimal git repo to reproduce the issue – Tarun Lalwani Commented Jul 12, 2019 at 11:50
• Thanks everyone. I was able to figure it out and keep my points ;) – Yasin Yaqoobi Commented Jul 12, 2019 at 17:30

1 Answer 1

I was able to figure out the problem. This is not really well documented but you need to prefetch the ponent. So for my case instead of prefetching /about-us I should have prefetched /about.

That's why there is as prop in the link ponent. Nextjs 9 just got released which fixes this issue.

https://nextjs/blog/next-9#dynamic-route-segments

For nextjs 9 you can save your file as [pid].js and it will catch all paths in a specific route. i.e for /products/test-product you have to create folder products and inside that add [pid].js.

I needed to query for product based on slug so I added this and voila, I have access to the slug inside my ponent.

Product.getInitialProps = async ({ query }) => {
    return { slug: query.pid };
};

These issues were pretty frustrating before next 9 but it's heavily simplified and it helped me fully remove server.js.