Next.js Discord

Discord Forum

Help: Text content does not match server-rendered HTML.

Answered
Singapura posted this in #help-forum
Open in Discord
Avatar
SingapuraOP
I make a random number generator, and i wanted it to only work on the client side. so i added the 'use client' declaration on the first line. but the error is shown.

'use client'

import {create} from 'zustand'
import {nanoid} from "nanoid";

interface BearState {
    bears: string
}

const useBearStore = create<BearState>()((set) => ({
    bears: nanoid(),
}))

export function _Chat() {
    const bearStore = useBearStore();

    console.log("------", bearStore.bears)

    return (
        <div>
            {bearStore.bears}
        </div>
    )
}


export default function Home() {
    return (
        <div>
            <_Chat/>
        </div>
    )
}
Image
Answered by Singapura
'use client'

import {create} from 'zustand'
import {nanoid} from "nanoid";
import {NoSSR} from "next/dist/shared/lib/lazy-dynamic/dynamic-no-ssr";
import {Suspense} from "react";

interface BearState {
    bears: string
}

const useBearStore = create<BearState>()((set) => ({
    bears: nanoid(),
}))

export function _Chat() {
    let bearStore = useBearStore();
    console.log(bearStore.bears)


    return (
        <div>
            {bearStore.bears}
        </div>
    )
}

export default function Home() {
    return (
        <div>
            <Suspense fallback={<div>Oop, any error</div>}>
                <NoSSR>
                    <_Chat/>
                </NoSSR>
            </Suspense>

        </div>
    )
}
View full answer

4 Replies

Avatar
Because client component will be rendered on server first and send it to client. If you want to work on client only, you could use dynamic with ssr: disable
https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr
Avatar
SingapuraOP
Thank you, I found two ways to solve it.
Avatar
SingapuraOP
'use client'

import {create} from 'zustand'
import {nanoid} from "nanoid";
import {NoSSR} from "next/dist/shared/lib/lazy-dynamic/dynamic-no-ssr";
import {Suspense} from "react";

interface BearState {
    bears: string
}

const useBearStore = create<BearState>()((set) => ({
    bears: nanoid(),
}))

export function _Chat() {
    let bearStore = useBearStore();
    console.log(bearStore.bears)


    return (
        <div>
            {bearStore.bears}
        </div>
    )
}

export default function Home() {
    return (
        <div>
            <Suspense fallback={<div>Oop, any error</div>}>
                <NoSSR>
                    <_Chat/>
                </NoSSR>
            </Suspense>

        </div>
    )
}
Answer
Avatar
SingapuraOP
'use client'

import {create} from 'zustand'
import {nanoid} from "nanoid";
import dynamic from "next/dynamic";

interface BearState {
    bears: string
}

const useBearStore = create<BearState>()((set) => ({
    bears: nanoid(),
}))

export function _Chat() {
    let bearStore = useBearStore();
    console.log(bearStore.bears)


    return (
        <div>
            {bearStore.bears}
        </div>
    )
}

const Chat = dynamic(async () => (await import("@/app/page"))._Chat, {ssr: false});

export default function Home() {
    return (
        <div>
            <Chat/>
        </div>
    )
}