Next.js Discord

Discord Forum

Client Side Rendering

Answered
Donskoy posted this in #help-forum
Open in Discord
Avatar
DonskoyOP
Hi there,
I have a specific use case in which my whole Next.js site needs to be Client-Side rendered. What's the best way to accomplish this?

(I'm new to next.js, so apologies if its an easy question)
Answered by Rafael Almeida
for the app dir this will probably work (app/layout.tsx file):
export default function RootLayout({ children }) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <html lang="en">
      <body>{mounted ? children : null}</body>
    </html>
  )
}
View full answer

40 Replies

Avatar
DonskoyOP
Using the /app directory
Avatar
joulev
“use client” everywhere
Avatar
DonskoyOP
ok
How can I confirm if it is working?
Avatar
joulev
You can use hooks, use client side states, et cetera
Avatar
DonskoyOP
ok
Avatar
DonskoyOP
It doesn’t seem to be working, I still see the normal HTML in the view source
Avatar
DonskoyOP
I put ‘use client’ on both index.tsx and _app.tsx and it still has the prerendered content
Avatar
Rafael Almeida
'use client' only does anything in the app dir, it has no effect in the pages dir, and it doesn't change the rendering behavior to CSR which seems to be what you need
you can de-optimize the entire app by not rendering anything in the server in the _app component: 
export default function MyApp({ Component, pageProps }) {
  const [mounted, setMounted] = useState(false)
 
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return <Component {...pageProps} />
}
Avatar
DonskoyOP
Okay
Let me try doing in the app dir
Avatar
Rafael Almeida
in the app dir you can do something similar but in the layout.tsx file, but I didn't test this yet
Avatar
DonskoyOP
Can I just change pages to app?
and it'll work
or do I have to do further configuration
the file names as well too
Avatar
Rafael Almeida
they are very different, you need to go through the migration proccess (folder names, file names, file nesting, etc)
Avatar
Rafael Almeida
for the app dir this will probably work (app/layout.tsx file):
export default function RootLayout({ children }) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <html lang="en">
      <body>{mounted ? children : null}</body>
    </html>
  )
}
Answer
Avatar
DonskoyOP
Got it
Okay
Let me try 'use client' in the app dir
Do I have to do it in layout.tsx and page.tsx or just layout?
I did create-next-app (with app router) and added 'use client' to both files and it doesn't seem to be working
The content is included in the initial page load
its fine if its not possible or what I'm asking for is too obscure, I'm just trying to see if it is
Avatar
Alfonsus Ardani
if you want to skip SSR try using dynamic()
Avatar
DonskoyOP
I’m just looking for the site content to not be included in the initial html
Avatar
Alfonsus Ardani
or 

const [mounted, setMount] = useState(false)
useEffect(() => { setMount(true) }, [] )

return(
  <> 
    {
      mounted ? children : null
    }
  <>
)
since initial state is false, and the return render is null it will show null on initial render
SSRing client comps is based on initial state of useState
so set it to false and don't show anything at initial render 👍
basically what rafael said
Avatar
DonskoyOP
Okay
That’s in the layout?
Avatar
Alfonsus Ardani
in the root layout if you want to make the rest of the child layout to be client sided
Avatar
DonskoyOP
Ok
Thank you very much
I’ll try that in the morning
Avatar
DonskoyOP
It worked, thank you guys for your help!