Server Side Rendering

Pinia Colada relies on Pinia for server side rendering. This means that you should follow Pinia's SSR guide to setup your server side rendering.

On top of that, Pinia Colada relies on some custom data structures that requires special serialization. This is handled automatically in the Nuxt module but if you are using a custom SSR setup, you will need to handle this yourself by serializing and reviving the cache tree.

You can check the source code of the Nuxt module for inspiration

Serialization

If you use devalue, you can follow their documentation for custom types. It should look something like this:

import devalue from 'devalue'
import { markRaw } from 'vue'
import { TreeMapNode, serializeTreeMap, hydrateQueryCache } from '@pinia/colada'

const stringified = devalue.stringify(pinia.state.value, {
  PiniaColada_TreeMapNode: (data: unknown) =>
    data instanceof TreeMapNode && serializeTreeMap(data),
})

const revivedData = devalue.parse(stringified, {
  PiniaColada_TreeMapNode: (data: ReturnType<typeof serializeTreeMap>) =>
    // We will use a custom hydration function
    data,
})

// we need to install Pinia and PiniaColada before hydrating the cache
app.use(pinia)
app.use(PiniaColada)
hydrateQueryCache(useQueryCache(pinia), revivedData)

Error Handling with SSR

Using devalue allows you to handle errors too. If you want to SSR errors, you will need to also handle their serialization

import devalue from 'devalue'
import { MyError } from '~/errors'

const stringified = devalue.stringify(error, {
  MyError: (data: unknown) =>
    data instanceof MyError && [data.message, data.customData],
})

const revivedData = devalue.parse(stringified, {
  MyError: (data: [string, unknown]) => new MyError(data[0], data[1]),
})