I'm working on a Next.js project where I need to import a component that uses browser-only APIs like window and localStorage. Since these APIs are not available during server-side rendering, I'm trying to prevent this component from being rendered on the server.

I found that next/dynamic can help with this, and I’m currently using it like this:

1import dynamic from 'next/dynamic';
2
3const NoSSRComponent = dynamic(() => import('../components/NoSSRComponent'), {
4  ssr: false,
5});
6

1import dynamic from 'next/dynamic';
2
3const NoSSRComponent = dynamic(() => import('../components/NoSSRComponent'), {
4  ssr: false,
5});
6

Is this the recommended approach for disabling SSR on a specific component in Next.js? Are there any drawbacks to doing this — for example, does it impact performance or SEO in any way?