I want to transfer a boolean value from a component running on the client side to the server side

Answered

Mini Satin posted this in #help-forum

Mini SatinOP

2023-10-05T16:51:31.000Z

Hello. I want to show the mobile version if the user is accessing the site from mobile, otherwise I want to show the normal version. I have a client component to understand that it is a mobile version:

ver-control.tsx --->

'use client'
import { useEffect, useState } from 'react'

export const VersionControl = () => {
    const [isMobile, setIsMobile] = useState(false)
    useEffect(() => {
      const mobileControl = /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      mobileControl ? setIsMobile(true) : setIsMobile(false)
    },[])

  return isMobile
}

Then I meet this component in a server component as follows:

page.tsx --->

import { VersionControl } from "@/components/ver-cont";

const page = () => {
    const isMobile = VersionControl()
  return (
    <div>
        {isMobile
        ? <MobileVersion />
        : <NormalVersion />
        }
    </div>
  )
}

export default page

But I get this error:
Attempted to call VersionControl() from the server but VersionControl is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

How should I proceed?

Answered by Nelson

@Mini Satin

import { headers } from "next/headers";

export default function Home() {
  const headersList = headers();
  const userAgent = headersList.get("user-agent");
  const isMobile =
    /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(
      userAgent as string
    );

  return <div>{isMobile ? <MobileVersion /> : <NormalVersion />}</div>;
}

View full answer

9 Replies

Nelson

2023-10-05T16:55:18.000Z

@Mini Satin You're using hooks in the page. So, you need to add 'use client' to the top of page.tsx

@Nelson <@305787918461698054> You're using hooks in the page. So, you need to add `'use client'` to the top of `page.tsx`

Mini SatinOP

2023-10-05T16:56:25.000Z

@Nelson I threw an empty 'page.tsx' here as an example. Normally I have a page with server components.

Nelson

2023-10-05T16:57:48.000Z

@Mini Satin But you can't call hooks on server side.

Mini SatinOP

2023-10-05T17:00:32.000Z

@Nelson Is there any way to overcome this without using hooks?

Nelson

2023-10-05T17:09:12.000Z

@Mini Satin

import { headers } from "next/headers";

export default function Home() {
  const headersList = headers();
  const userAgent = headersList.get("user-agent");
  const isMobile =
    /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(
      userAgent as string
    );

  return <div>{isMobile ? <MobileVersion /> : <NormalVersion />}</div>;
}

Answer

Nelson

2023-10-05T17:10:10.000Z

Mini SatinOP

2023-10-05T17:10:25.000Z

I don't know how to thank you. I've been working on this for four hours. You made my day. I'm so grateful to you.