Next Js自定义路由和SSR

Question

我正在将 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 spectrum 的建议，我尝试在 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);
            }
        });
    }, []);

Answer 1

我能够找出问题所在。这没有很好的记录，但您需要预取组件。所以对于我的情况而不是预取 /about-us 我应该预取 /about。

这就是 link 组件中有 as 属性的原因。 Nextjs 9 刚刚发布，修复了这个问题。

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

对于 nextjs 9，您可以将文件另存为 [pid].js，它将捕获特定路径中的所有路径。即对于 /products/test-product，您必须创建文件夹产品并在其中添加 [pid].js。

我需要查询基于 slug 的产品，所以我添加了这个，瞧，我可以访问我的组件中的 slug。

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

这些问题在下一个 9 之前非常令人沮丧，但它已经大大简化并帮助我完全删除 server.js。

Next Js自定义路由和SSR

Next Js Custom Routes and SSR

javascript

node.js

express

react-apollo

next.js