web-dev-qa-db-fra.com

Suivant Js itinéraires personnalisés et SSR

J'utilise apollo avec le suivant et récemment, j'ai remarqué que les itinéraires personnalisés cassent la SSR. Habituellement, si vous parcourez les pages, apollo met en cache la requête et lorsque vous êtes sur la page la prochaine fois, il sert tout depuis le cache. Cependant, avec des itinéraires personnalisés, le cache n'est jamais utilisé.

J'ai également remarqué que lorsque je clique sur ces pages, une erreur clignote dans la console. Mais ça s'en va très vite et je n'ai pas pu le copier ici.

Server.js

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


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

Gestionnaire de clic de men

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

Éléments de men

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

Sur la base d'une suggestion du spectre de nextjs, j'ai essayé de précharger des pages personnalisées dans le composant TopNav, mais cela n'a pas fonctionné.

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);
            }
        });
    }, []);
javascriptnode.jsexpressreact-apollonext.js
14
Yasin Yaqoobi

J'ai pu comprendre le problème. Ce n'est pas vraiment bien documenté, mais vous devez pré-extraire le composant. Donc, pour mon cas, au lieu de précharger /about-us J'aurais dû prélire /about.

C'est pourquoi il y a as prop dans le composant link. Nextjs 9 vient de sortir, ce qui résout ce problème.

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

Pour nextjs 9, vous pouvez enregistrer votre fichier sous [pid] .js et il interceptera tous les chemins dans une route spécifique. c'est-à-dire pour /products/test-product vous devez créer des produits de dossier et à l'intérieur ajouter [pid].js.

J'avais besoin de rechercher un produit basé sur slug, j'ai donc ajouté ceci et le tour est joué, j'ai accès au slug à l'intérieur de mon composant.

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

Ces problèmes étaient assez frustrants avant le 9 suivant, mais ils sont très simplifiés et cela m'a aidé à supprimer complètement server.js.

4
Yasin Yaqoobi