我在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);
}
});
}, []);
我能够找出问题所在。确实没有很好的记录,但是您需要预取组件。因此,就我而言,
/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
。我需要查询基于弹头的产品,所以我添加了这个,瞧,我可以访问组件内部的弹头。
在接下来的9年之前,这些问题非常令人沮丧,但已大大简化了工作,并帮助我彻底删除了这些问题
server.js
。