How to prevent the router.asPath useEffect from rendering twice on load while using NextJs and getServerSideProps?

Question

I am building an explore page with url query parameters (NextJs page with getServerSideProps)

1. If an external user goes onto this url domain.com/explore?type=actions&category=food it will fetch on the DB the data for "actions" and "food"
2. If an internal user uses on-page filters, it generates a new url domain.com/explore?type=actions&category=food&orderBy=points and I then fetch the data and render.

To do so, I am basically setting up a useEffect with the [router.asPath] dependency. The problem is that it renders twice on load for external users (due to gerServerSideProps ?) and therefore fetching the data twice :(

Any hints ? Thanks !

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

Finally found a solution with this thread. https://github.com/vercel/next.js/issues/35822 The problem is due to React being used in "Strict mode" in the next.config.js. https://reactjs.org/docs/strict-mode.html

Solution :

/** @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

Switching the strictMode to false