Next.js带URL参数时页面重复渲染问题求助

问题重现 #

页面代码 #

import { NextPage } from "next/types";

console.log("I log outside");

const FoobarPage: NextPage = () => {
  console.log("I log inside");

  return (
    <>
      Foobar
    </>
  );
};

export default FoobarPage;

日志现象 #

• 访问无参数路由 localhost:3000/foobar 时，控制台输出：

I log outside unsubscribe.tsx:3:8
I log inside unsubscribe.tsx:7:10

• 访问带参数路由 localhost:3000/foobar?hello=world 时，控制台输出：

I log outside unsubscribe.tsx:3:8
I log inside unsubscribe.tsx:7:10
I log inside unsubscribe.tsx:7:10

该问题在本地开发及生产环境均存在，实际场景中依赖外部注入window对象的表单组件会因重复渲染出现异常，关闭React严格模式无法解决。

原因分析 #

1. Next.js路由机制对查询参数的处理：即使组件未显式依赖URL参数，Next.js的路由系统在检测到查询参数变化（或首次加载带参数的路由）时，会触发额外的渲染周期。
2. 外部window对象初始化时机问题：如果组件渲染时直接访问未完成初始化的外部window对象，重复渲染会导致多次触发未就绪的逻辑，引发异常。

解决思路 #

1. 显式依赖查询参数并缓存逻辑 #

使用useRouter获取查询参数，通过useMemo缓存依赖参数的业务逻辑，避免不必要的重复执行：

import { NextPage } from "next/types";
import { useRouter } from "next/router";
import { useMemo } from "react";

console.log("I log outside");

const FoobarPage: NextPage = () => {
  const router = useRouter();
  // 缓存查询参数，避免因router对象引用变化触发渲染
  const queryParams = useMemo(() => ({ ...router.query }), [router.query]);

  console.log("I log inside", queryParams);

  // 缓存依赖外部window对象的逻辑，仅在参数变化时重新执行
  const formInstance = useMemo(() => {
    return window?.externalForm || null;
  }, [queryParams]);

  return (
    <>
      {formInstance && <div>{formInstance}</div>}
      Foobar
    </>
  );
};

export default FoobarPage;

2. 用useEffect处理一次性初始化逻辑 #

将访问外部window对象的逻辑放在useEffect中，确保仅在组件挂载时执行一次：

import { NextPage } from "next/types";
import { useEffect, useState } from "react";

console.log("I log outside");

const FoobarPage: NextPage = () => {
  const [formInstance, setFormInstance] = useState<null | any>(null);

  useEffect(() => {
    // 仅在组件首次挂载时访问外部window对象
    if (window?.externalForm) {
      setFormInstance(window.externalForm);
    }
  }, []);

  console.log("I log inside");

  return (
    <>
      {formInstance && <div>{formInstance}</div>}
      Foobar
    </>
  );
};

export default FoobarPage;

3. 调整页面数据获取方式 #

如果页面可静态生成，使用getStaticProps预渲染页面，减少客户端渲染次数：

import { NextPage, GetStaticProps } from "next/types";

console.log("I log outside");

const FoobarPage: NextPage = ({ query }) => {
  console.log("I log inside", query);

  return (
    <>
      Foobar
    </>
  );
};

export const getStaticProps: GetStaticProps = async (context) => {
  return {
    props: {
      query: context.query || {},
    },
    revalidate: 60, // 根据业务需求设置缓存刷新时间
  };
};

export default FoobarPage;

4. 检查路由配置 #

确认next.config.js中是否存在特殊路由规则（如重写、重定向），导致查询参数被视为独立路由触发重复渲染。

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