<Personalization>

This component evaluates and renders the result of a CQL query, serving as the declarative equivalent of the useEvaluation hook.

Example

Here is a basic example of how to use this component:

import {Personalization} from '@croct/plug-next';

export function ViewDocsLink() {
  return (
    <Personalization query="user's persona is 'developer'">
      {isDeveloper => (
        isDeveloper
          ? <a href="/docs">View docs</a>
          : <a href="/share">Share with your developer</a>
      )}
    </Personalization>
  );
}

Attributes

The following list describes the supported parameters:

query

string

The CQL query to evaluate, with a maximum length of 500 characters.

children

(result: JSON)=>ReactNode

A function that receives the evaluation result and returns the rendered React node.

For a detailed example, refer to the Declarative snippet in the Query evaluation guide.

initial(optional)

JSON

An initial value to render while loading the actual value.

This value is required for server-side rendering. For client-side rendering, not specifying this value will cause rendering to suspend, requiring a <Suspense> boundary to handle the loading state.

fallback(optional)

JSON

A fallback value to render in case of an error.

If not specified, the error is thrown on failure.

expiration(optional)

number

The cache expiration time in milliseconds, extended on every render.

If negative, the cache never expires. By default, the cache expires after 60 seconds.

The SDK caches the result of the evaluation to prevent network requests on concurrent renders and re-renders.

Default:60000

cacheKey(optional)

string

A unique key to identify the cache entry.

By default, the cache key is a hash of the query and attributes. To force re-evaluation even if the query and attributes are the same, provide a unique cache key.

staleWhileLoading(optional)

boolean

Whether to use the previous result while re-evaluating the new value.

By default, the hook always returns the initial value or suspends while evaluating the new value.

If this option is enabled, the behaviour changes as follows:

• On the first render, it either returns the initial value or suspends while evaluating the query.
• If the cache key or any other property that affects the result changes, it returns the previous result while re-evaluating the query.
• When the new result is available, it renders again with the updated value.

Default:false

timeout(optional)

number

The maximum fetch time in milliseconds.

Environment variable

You can also set this option by defining the environment variable NEXT_PUBLIC_CROCT_DEFAULT_FETCH_TIMEOUT.

Once reached, the SDK will abort the request and reject the promise with a timeout error.

attributes(optional)

object

The map of attributes to inject in the evaluation context.

The attributes can be referenced in audience conditions using the context variable. For example, suppose you pass the following attributes:

{cities: ["New York", "San Francisco"]}

You can then reference them in queries like:

context's cities include location's city

For more information, see Context variables.

The following restrictions apply to the attributes:

• Up to 30 entries and 5 levels deep
• Keys can be either numbers or non-empty strings with a maximum length of 50 characters
• Values can be null, numbers, booleans, strings (up to 50 characters), or nested maps
• Nested maps follow the same constraints for keys and values