Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Next Js Custom Routes and SSR

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);
            }
        });
    }, []);
like image 911
Yasin Yaqoobi Avatar asked Jul 03 '19 11:07

Yasin Yaqoobi


People also ask

Should I use next JS without SSR?

Next. js does not work without server-side rendering (SSR) by default. I preferred using a non-SSR solution like Create React App, when my app did not require SSR, because SSR had caused me so many unnecessary problems. Turns out Next is still 💯/💯, even if you only need index.

Is NextJS a SSR?

Next Js is a React-based framework that provides a developer with everything required for a production-grade application. SSR or Server Side Rendering is also known as dynamic rendering. In SSR the page is generated each time the server gets a request.

What is difference between getStaticProps and getServerSideProps?

getStaticProps and getServerSideProps can be defined as follows: getStaticProps(): A method that tells the Next component to populate props and render into a static HTML page at build time. getServerSideProps(): A method that tells the Next component to populate the props and render into a static HTML page at run time.

How routes work in next JS?

Next. js has a file-based routing system in which each page automatically becomes a route based on its file name. Each page is a default exported React component from the pages directory that can be used to define the most common route patterns.


Video Answer


1 Answers

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.

like image 75
Yasin Yaqoobi Avatar answered Oct 05 '22 23:10

Yasin Yaqoobi