Server-side Rendering

When using Account Kit core in a server-side rendered setting, you will see inconsistencies of the user state between the server and the client. This will lead to flashes of content when a user is logged in. To avoid this, the account state can be optimistically loaded on the server and passed to the client.

Update your config

To enable this setting, you can set ssr: true when creating a config.

import { 
const createConfig: (params: CreateConfigProps) => AlchemyAccountsConfig
Creates an AlchemyAccountsConfig object that can be used in conjunction with the actions exported from @account-kit/core.
The config contains core and client stores that can be used to manage account state in your application.
createConfig } from "@account-kit/core";
import { 
const sepolia: Chain
sepolia, 
function alchemy(config: AlchemyTransportConfig): AlchemyTransport
Creates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy } from "@account-kit/infra";

export const 
const config: AlchemyAccountsConfig
config = 
function createConfig(params: CreateConfigProps): AlchemyAccountsConfig
Creates an AlchemyAccountsConfig object that can be used in conjunction with the actions exported from @account-kit/core.
The config contains core and client stores that can be used to manage account state in your application.
createConfig({
  
transport: AlchemyTransport
transport: 
function alchemy(config: AlchemyTransportConfig): AlchemyTransport
Creates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy({ 
apiKey: string
apiKey: "ALCHEMY_API_KEY" }),
  
chain: Chain
chain: 
const sepolia: Chain
sepolia,
  
ssr?: boolean | undefined
Enable this parameter if you are using the config in an SSR setting (eg. NextJS) Turing this setting on will disable automatic hydration of the client store
ssr: true,
});

This setting will defer hydration of the account kit state until you can call the hydrate method on mount.

Hydrate the Account State

Now that you’ve set up your config for SSR, you will have to manually hydrate the state on the client. This can be done by calling the hydrate method exported by Account Kit core.

Persisting the Account State

To consistently pass the state between the server and the client, you can pass in a cookie storage to the config object created above. The cookie storage allows the client state to be written serialized to a cookie which can be passed along to the server on each request. This allows the server to have access to certain parts of the account state when rendering, ensuring a consistent render between client and server (eg. user’s address displayed in the top nav). Instances which can only be created on the client will still not be available on the server, however. This includes the signer or smart contract account instances.

import {
  
const createConfig: (params: CreateConfigProps) => AlchemyAccountsConfig
Creates an AlchemyAccountsConfig object that can be used in conjunction with the actions exported from @account-kit/core.
The config contains core and client stores that can be used to manage account state in your application.
createConfig,
  
const cookieStorage: (config?: {
    sessionLength?: number;
    domain?: string;
}) => Storage
Function to create cookie based Storage
cookieStorage,
} from "@account-kit/core";
import { 
const sepolia: Chain
sepolia, 
function alchemy(config: AlchemyTransportConfig): AlchemyTransport
Creates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy } from "@account-kit/infra";

export const 
const config: AlchemyAccountsConfig
config = 
function createConfig(params: CreateConfigProps): AlchemyAccountsConfig
Creates an AlchemyAccountsConfig object that can be used in conjunction with the actions exported from @account-kit/core.
The config contains core and client stores that can be used to manage account state in your application.
createConfig({
  
transport: AlchemyTransport
transport: 
function alchemy(config: AlchemyTransportConfig): AlchemyTransport
Creates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy({ 
apiKey: string
apiKey: "ALCHEMY_API_KEY" }),
  
chain: Chain
chain: 
const sepolia: Chain
sepolia,
  
ssr?: boolean | undefined
Enable this parameter if you are using the config in an SSR setting (eg. NextJS) Turing this setting on will disable automatic hydration of the client store
ssr: true,
  
storage?: CreateStorageFn | undefined
storage: 
const cookieStorage: (config?: {
    sessionLength?: number;
    domain?: string;
}) => Storage
Function to create cookie based Storage
cookieStorage,
});

Now you can get the initial state from cookies and pass it to the hydrate method to hydrate the account state on the client or on the server.