Client Side Rendering
Answered
Donskoy posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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)
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>
)
}
40 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
Using the /app directory
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
“use client†everywhere
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
ok
How can I confirm if it is working?
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
You can use hooks, use client side states, et cetera
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
ok
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
It doesn’t seem to be working, I still see the normal HTML in the view source
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
I put ‘use client’ on both index.tsx and _app.tsx and it still has the prerendered content
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
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 needyou 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](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
Okay
Let me try doing in the app dir
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
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](https://cdn.discordapp.com/embed/avatars/2.png)
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](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
Rafael Almeida
they are very different, you need to go through the migration proccess (folder names, file names, file nesting, etc)
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
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](https://cdn.discordapp.com/embed/avatars/2.png)
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](https://cdn.discordapp.com/avatars/194128415954173952/708a8637ada505b6b7a85972807d9dca.webp?size=256)
Alfonsus Ardani
if you want to skip SSR try using dynamic()
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
I’m just looking for the site content to not be included in the initial html
![Avatar](https://cdn.discordapp.com/avatars/194128415954173952/708a8637ada505b6b7a85972807d9dca.webp?size=256)
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 renderSSRing 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](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
Okay
That’s in the layout?
![Avatar](https://cdn.discordapp.com/avatars/194128415954173952/708a8637ada505b6b7a85972807d9dca.webp?size=256)
Alfonsus Ardani
in the root layout if you want to make the rest of the child layout to be client sided
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
Ok
Thank you very much
I’ll try that in the morning
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
DonskoyOP
It worked, thank you guys for your help!