[nextjs] 특정 컴포넌트를 정확히 클라이언트에서만 렌더링하기

useEffect

useEffect는 클라이언트에서만 실행하도록 되어있다.

 

import { useEffect, useState } from 'react';
import 대충 클라이언트에서만 실행할 수 있는 컴포넌트 from 'ASDF';

export default function Test() {
	const [isClient, setIsClient] = useState(false);
    
    useEffect(() => {
    	setIsClient(true)
    }, [])
    
    return (
    	<div>
        	{isClient && <대충 클라이언트에서만 실행할 수 있는 컴포넌트/>}
        </div>
    )
}

 

서버 사이드에서는 useEffect가 실행되지 않으니 isClient가 항상 false이고, 대충 클라이언트에서만 실행할 수 있는 컴포넌트가 실행되지 않는다.

 

typeof

서버사이드에서는 window 객체가 없으므로 해당 객체를 통해 판별한다

import 대충 클라이언트에서만 실행할 수 있는 컴포넌트 from 'ASDF';

export default function Test() {
	const isClient = typeof window === "undefined"
    
    return (
    	<div>
        	{isClient && <대충 클라이언트에서만 실행할 수 있는 컴포넌트/>}
        </div>
    )
}

 

동적 컴포넌트 로딩

nextjs의 dynamic을 활용

import dynamic from 'next/dynamic';

const 대충 클라이언트에서만 실행할 수 있는 컴포넌트 = dynamic(
	() => import ('ASDF'),
    { ssr: false }
);

export default function Test() {
    return (
    	<div>
        	<대충 클라이언트에서만 실행할 수 있는 컴포넌트/>
        </div>
    )
}