While @chemicstry solution could work: you could wrap the two behaviors (server vs browser) into a single function.
const isSsr = (): boolean => typeof window === 'undefined';
const ssrCookies = isSsr() ? require("next/headers").cookies : undefined;
You probably should not, as it is discouraged and considered bad practice. The reason is that the server code will be included in the client js bundle (tree-shaking won't work here).

It might be sort-of OK to import next/headers, I haven't looked at what actually ends up in the js bundle. But I would not recommend it, consider this:

It may cause unexpected issues, secret leaks, etc. Here, you have no control over the library size, or dependencies. If for example, the library were to import fs, you client would not compile, or maybe even crash at runtime in some cases... the debugging experience might get ugly pretty quickly from there. It could also add several MB of unused javascript shipped to every clients...

And even more dangerous: importing your own code might easily leak sensitive data (secrets keys) if you're not carefull. Importing a file that contains an API call with a secret token, will most likely end up in the public js bundle...

It is kinda being discussed currently, but it's not very active, and it is not likely to be resolved any time soon IMO. See:

Unused Server-Only Dynamic Import Inside typeof window === 'undefined' Causes Error vercel/next.js#36514

When using SWC, code wrapped in if (typeof window === 'undefined') is not removed from the browser bundle. vercel/next.js#30892

The "supported" approach would be to split your component in two, and provide the SSR cookie as a prop to the Client Component, like so:

ServerComponent.tsx
import { cookies } from 'next/headers'

export default function ServerComponent() {
    const cookie = cookies().get('myCookie')?.value
    return (
        <ClientComponent initial={{ cookie }} />
    )
}
ClientComponent.tsx
'use client'

import { getCookie } from 'cookies-next'

export default function ClientComponent(props: { inital: { cookie?: string }}) {
    const cookie = getCookie('myCookie')?.toString()
    return (
        <p>{cookie ?? props.initial.cookie}</p>
    )
}
}

Finally! I had been looking for this solution for weeks. It was enough to separate the "server" from the "client"

how can use it with next 13? #44

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions