Next Js Custom Routes and SSR

Question

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);
            }
        });
    }, []);

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, Jul 08 '19 at 01:57
Try put "debbuger" [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger] above your console.log and it will stop execution and you'll be able to see the error — theCuriousOne, Jul 11 '19 at 07: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, Jul 11 '19 at 12:22
Thanks everyone. I was able to figure it out and keep my points ;) — Yasin Yaqoobi, Jul 12 '19 at 17:30

score 4 · Accepted Answer · answered Jul 12 '19 at 17:29

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

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

https://nextjs.org/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 component.

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.

Next Js Custom Routes and SSR

1 Answers1