SSR Example

[popuguytheparrot]

It would be very nice to see an example for SSR with for example nextjs

[ai]

Does it helps? https://github.com/nanostores/i18n#server-side-rendering

[popuguytheparrot]

in this example let locale, i18n will shared for all users on each request.

How can i hydrate locales to store and cleanup on server?

So, in Next.js i need serialised data to gssp props

import { locale } from 'nanostores'

let locale, i18n

if (isServer) {
  locale = atom(db.getUser(userId).locale || parseHttpLocaleHeader())
  i18n = createI18n(locale, {
    async get (code) {
      return JSON.parse(await readFile(`public/translations/${code}.json`))
    }
  })
} else {
  …
}

export { locale, i18n }

[ai]

in this example let locale, i18n will shared for all users on each request.

You need to use your framework’s APIs for this. You can avoid using a separated file for every store and initialize all stores together in some functions like buildContext(). Or you can export store builder from every file.

So, in Next.js i need serialised data to gssp props

Sorry, I do not use Next.js to suggest exact solution.

If you need some specific API, ask for it.

[ai]

I am closing this issue. We have a similar “What is the best SSR integration” discussion in main Nano Stores repository.

But without an API suggestions from Next.js users I can’t help.