我有一个NextJS应用程序,它承载一个从Supabase获取数据的ISR页面,有一个中间件在呈现页面之前记录页面访问。
export async function middleware(
request: NextRequest,
fetchEvent: NextFetchEvent
) {
console.log('request.nextUrl.pathname', request.nextUrl.pathname);
if (request.nextUrl.pathname.split('/').length === 2) {
return linkVisitMiddleware(request, fetchEvent);
}
}
中间件的问题被调用了2到3次(不知道为什么这些数字会波动)。
上述日志记录将在服务器上打印以下内容:
request.nextUrl.pathname /slug
request.nextUrl.pathname /slug
request.nextUrl.pathname /slug
奇怪的是,这只发生在生产环境(next start
)中。在本地(next serve
),它按预期运行一次。
我看到了一些关于reactStrictMode
的文章,但这并没有帮助:(
编辑:
在NextJS 13.1.1
、13.1.6
和13.3.0
上测试
1条答案
按热度按时间vxf3dgd41#
经过几个小时的调试,我找到了罪魁祸首。
ISR页面使用回退策略,如
{fallback: true}
,因此,它尝试请求HTML页面,如果不可用,它将再次访问相同的路由来获取数据。为了避免这个问题,我发现NextJS使用头来区分请求的类型。下面是我的解决方案:
此外,我还添加了一个HTTP方法检查,用于区域设置路由的情况,不包括
OPTIONS
和HEAD
。