For a page, I fetch data with a useEffect. It works fine in development, but in the preview deployment in Vercel it take a full page refresh for the data to be fetched and displayed on the page. I'm using auth.js for the session to get the id of the user. Here is my useEffect:

  useEffect(() => {
    const fetchData = async () => {
      try {
        if (!session?.user?.id) return;
        
        setIsLoading(true)
        console.log("Fetching data for user:", session.user.id)
        
        const [userResponse, teamsResponse] = await Promise.all([
          fetch(`/api/users/${session.user.id}`),
          fetch(`/api/users/${session.user.id}/groups`)
        ])

        if (userResponse.ok && teamsResponse.ok) {
          const [userData, teamsData] = await Promise.all([
            userResponse.json(),
            teamsResponse.json()
          ])

          setUserData(userData)
          setTwoFactorEnabled(userData.isTwoFactorEnabled)
          setTeams(teamsData)
        }
      } catch (error) {
        console.error('Error fetching data:', error)
        toast.error('Failed to load user data')
      } finally {
        setIsLoading(false)
      }
    }

    // Only fetch if we have an authenticated session
    if (status === 'authenticated' && session?.user?.id) {
      fetchData()
    } else if (status === 'unauthenticated') {
      setIsLoading(false)
    }
  }, [session, status])