Next Js Custom Routes и SSR - PullRequest
Новая
       31

Next Js Custom Routes и SSR

14 голосов
/ 03 июля 2019

Я использую apollo с next, и недавно я заметил, что пользовательские маршруты нарушают SSR. Обычно, если вы перемещаетесь по страницам, Apollo кеширует запрос, а когда вы в следующий раз находитесь на странице, он обслуживает все из кэша. Однако при использовании пользовательских маршрутов кеш никогда не используется.

Я также заметил, что при нажатии на эти страницы в консоли мигает ошибка. Но это уходит очень быстро, и я не смог скопировать это здесь.

Server.js 

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


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

Обработчик щелчков меню 

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

Пункты меню 

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

Основываясь на предложении из спектра nextjs, я попытался предварительно выбрать пользовательские страницы в компоненте TopNav, но это не сработало. 

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

1 Ответ

4 голосов
/ 12 июля 2019

Мне удалось выяснить проблему. Это не очень хорошо задокументировано, но вам нужно предварительно выбрать компонент. Так что для моего случая вместо предварительной выборки /about-us я должен был бы предварительно выбрать /about.

Вот почему в компоненте ссылки есть as prop. Nextjs 9 только что вышел, который исправляет эту проблему.

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

Для nextjs 9 вы можете сохранить ваш файл как [pid] .js, и он будет перехватывать все пути на определенном маршруте. т. е. для /products/test-product вы должны создать папку продуктов и внутри нее добавить [pid].js.

Мне нужно было запросить продукт, основанный на слаге, поэтому я добавил это и вуаля, у меня есть доступ к слагу внутри моего компонента. 

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

Эти проблемы были довольно неприятны до следующих 9, но они сильно упрощены и помогли мне полностью удалить server.js.

...