My homepage is rendered on server. It renders component that must have 'use client' since it uses state. Still, it IS rendered on the server and I can see in the response content of that component.

Now in that component I need to call function getDictionary and I can not do that since it must be called from server due to cookies.
Htf am I supposed to get translations if I can not call this fn ?

import { cookies } from 'next/headers'
import { deepObjectLookup } from '../javascript'
import { APP_LANGUAGES, DEFAULT_ALL_LANGUAGE } from '@/contants/languages'

const dictionaries = {
  [APP_LANGUAGES.ba]: () => import('../dictionary/ba.json').then((module) => module.default),
  [APP_LANGUAGES.en]: () => import('../dictionary/en.json').then((module) => module.default),
}

export const getDictionary = async (mainTranslationPath = '') => {
  const cookieStore = cookies()
  const langCookie = cookieStore.get('lang')

  const lang = langCookie?.value ?? DEFAULT_ALL_LANGUAGE

  const dictionary = await dictionaries[lang]()

  return (translationSubpath) => {
    const completePath = `${mainTranslationPath}.${translationSubpath}`
    return deepObjectLookup(dictionary, completePath)
  }
}