如何防止路由器。在使用NextJS和GetServersideProps时，ASPATH使用效应在负载上呈现两次？

Question

URL查询参数（带有GetServersIdeProps的NextJS页面）构建探索页面

1. 如果外部用户进入此url domain.com/explore？type = actions&category= food，我将使用 “操作”和“食物”的数据
2. 如果内部用户使用页面过滤器，它将生成新的URL domain.com/explore？然后，我获取数据并渲染。

为此，我基本上是在[Router.aspath]依赖项上设置使用效率。问题在于，外部用户的负载两次（由于Gerserversideprops？），因此两次获取数据:(

有提示吗？谢谢！

useEffect(() => {
        // parsing the url
        const url = location.search
        const urlQuery = url.slice(1)
        const result = {}
        urlQuery.split("&").forEach(part => {
            const item = part.split("=");
            result[item[0]] = decodeURIComponent(item[1]);
        });
        console.log(result)
        
        // Updating forms/filters states and setting up query parameters
        queryParams = [] // reseting the params
        setFiltersData(prevFiltersData => {
            return {
                ...prevFiltersData,
                thumbType: result.type, 
            }
        })
        if (result.field) {
            setFiltersData(prevFiltersData => {
                return {
                    ...prevFiltersData,
                    categoryField: result.field, 
                    categoryOperator: result.fieldOp, 
                    categoryValue: result.fieldVal,
                }
            })
            queryParams.push(where(result.field, result.fieldOp, decodeURIComponent(result.fieldVal)))
        }
        if (result.orderBy) {
            setFiltersData(prevFiltersData => {
                return {
                    ...prevFiltersData,
                    orderFieldActions: result.orderBy, 
                    orderOperatorActions: result.orderType,
                }
            })
            queryParams.push(orderBy(result.orderBy, result.orderType))
        }
        setSearchParams(queryParams) // saving query params to state for subsequent data fetch
        getFilteredData(result.type) // Fetching data from the DB
        setInitialLoading(false)
    }, [router.asPath])

Answer 1

终于找到了使用此线程的解决方案。
问题是由于在Next.config.js中使用的“严格模式”中的反应。
https://reactjs.org/docs/strict-mode.html

解决方案：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  experimental: {
    scrollRestoration: true,
  },
  images: {
    domains: ['lh3.googleusercontent.com', 'graph.facebook.com', 'firebasestorage.googleapis.com'],
  },
}

module.exports = nextConfig

将严格模式切换为false