Next Js自定义路线和SSR

JavaScript React.js

DavaidTony宝儿

2020-03-20

我在next上使用apollo,最近我注意到自定义路由破坏了SSR。通常,如果您浏览页面,则阿波罗会缓存查询,而当您下次访问该页面时,它将处理缓存中的所有内容。但是,对于自定义路由,永远不会使用缓存。

我还注意到,当我单击这些页面时,控制台中会闪烁一个错误。但是它很快消失了,我无法在这里复制它。

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 Component中预取自定义页面,但此方法不起作用。

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

第2456篇《Next Js自定义路线和SSR》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
西门路易 2020.03.20

我能够找出问题所在。确实没有很好的记录,但是您需要预取组件。因此,就我而言,/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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android