Hydration (SSR)
Learn how to hydrate and dehydrate permissions in your application
Overview
Hydration is the process of converting server-side state into client-side state. In Permix, hydration allows you to serialize permissions on the server and restore them on the client.
Function-based permissions are converted to null during dehydration since functions cannot be serialized to JSON. If the dehydrated snapshot contains any null values, call setup() on the client immediately after hydrate() to fully restore those rules.
Boolean-only snapshots are considered complete, so after hydrate() they become ready on the client immediately.
Usage
Permix provides two instance methods for handling hydration:
dehydrate()- Converts the current permissions state into a JSON-serializable formathydrate(state)- Restores permissions from a previously dehydrated state
import { } from '@aminzoubaa/permix'
const = <{
: {
: { : boolean }
: 'create' | 'read'
}
}>()
// Set up initial permissions
.({
: {
: true,
: => !!?.
}
})
// Dehydrate permissions to JSON
const = .()
// Result: { post: { create: true, read: null } }
// Later, hydrate permissions from the state
.()Server-Side Rendering
Hydration is particularly useful in server-side rendering scenarios where you want to transfer permissions from the server to the client:
import { } from '@aminzoubaa/permix'
const = <{
: {
: { : boolean }
: 'create' | 'read'
}
}>()
.({
: {
: true,
: => !!?.,
},
})
const = .()
// { post: { create: true, read: null } }
const = <{
: {
: { : boolean }
: 'create' | 'read'
}
}>()
.()
.({
: {
: true,
: => !!?.,
},
})