NextJS v13.2.4路由组件渲染4次是否属于正常现象？

正在学习NextJS v13.2.4，测试时发现路由组件被渲染了4次，不确定是否由开发模式导致，想确认这种情况是否正常。

组件代码： #

import { useRouter } from "next/router";
import React from "react";

const PortfolioProjectPage = () => {

  const router = useRouter();
  console.log(router.query);

  return <h1>PortfolioProjectPage</h1>;
};

export default PortfolioProjectPage;

访问http://localhost:3000/portfolio/bridge时控制台输出： #

Object {  }                      [projectid].js:6:10
Object {  }                           bridge:1861:29
Object { projectid: "bridge" }   [projectid].js:6:10
Object { projectid: "bridge" }        bridge:1861:29

解答： #

这种情况在开发模式下完全正常，主要是两个机制叠加导致的：

1. React Strict Mode：开发模式下React默认启用Strict Mode，它会刻意重复执行组件渲染、useEffect等逻辑（单次流程执行两次），目的是提前帮你排查潜在的副作用问题，生产环境会自动关闭该机制。
2. Next.js动态路由加载逻辑：在[projectid].js这类动态路由中，组件首次渲染时路由参数还未完全解析，此时router.query是空对象；当路由参数加载完成后，组件会再次触发渲染，此时能拿到完整的projectid值。

两者叠加后就出现了四次日志：前两次是空对象（Strict Mode导致的初始渲染重复），后两次是带参数的渲染（同样因为Strict Mode重复执行了一次）。

切换到生产环境（执行npm run build && npm start）后，Strict Mode的重复渲染会消失，组件只会渲染两次：一次初始空参数状态、一次参数加载完成后的状态，不会出现四次渲染的情况。

内容的提问来源于stack exchange，提问作者Mister Killuminati