Server-side Rendering

When using Smart Wallets 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 Smart Wallets core.

import { 
function hydrate(config: AlchemyAccountsConfig, initialState?: StoredState): HydrateResult
Will hydrate the client store with the provided initial state if one is provided.
hydrate } from "@account-kit/core";
import { 
import config
config } from "./config";

const { 
const onMount: () => Promise<void>
onMount } = 
function hydrate(config: AlchemyAccountsConfig, initialState?: StoredState): HydrateResult
Will hydrate the client store with the provided initial state if one is provided.
hydrate(
import config
config);

// when your component has mounted on the client, call the onMount method
// how you do this will depend on your framework, but here we'll just check for `window`
// to be defined
if (typeof 
var window: Window & typeof globalThis
MDN Reference
window !== "undefined") {
  
const onMount: () => Promise<void>
onMount();
}

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 { 
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, 
const sepolia: Chain
sepolia } 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: "YOUR_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,
});

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.

import { 
function cookieToInitialState(config: AlchemyAccountsConfig, cookie?: string): StoredState | undefined
Converts a cookie into an initial state object
cookieToInitialState, 
function hydrate(config: AlchemyAccountsConfig, initialState?: StoredState): HydrateResult
Will hydrate the client store with the provided initial state if one is provided.
hydrate } from "@account-kit/core";
import { 
import config
config } from "./config";

// this is an example of how to get the cookie on the client
// but on the server you might get it from the `req.cookies` object
// it all depends on your framework
const 
const initialState: StoredState | undefined
initialState = 
function cookieToInitialState(config: AlchemyAccountsConfig, cookie?: string): StoredState | undefined
Converts a cookie into an initial state object
cookieToInitialState(
import config
config, 
var document: Document
MDN Reference
document.
Document.cookie: string
Returns the HTTP cookies that apply to the Document. If there are no cookies or cookies can't be applied to this resource, the empty string will be returned.
Can be set, to add a new cookie to the element's set of HTTP cookies.
If the contents are sandboxed into a unique origin (e.g. in an iframe with the sandbox attribute), a "SecurityError" DOMException will be thrown on getting and setting.
MDN Reference
cookie);
const { 
const onMount: () => Promise<void>
onMount } = 
function hydrate(config: AlchemyAccountsConfig, initialState?: StoredState): HydrateResult
Will hydrate the client store with the provided initial state if one is provided.
hydrate(
import config
config, 
const initialState: StoredState | undefined
initialState);

if (typeof 
var window: Window & typeof globalThis
MDN Reference
window !== "undefined") {
  
const onMount: () => Promise<void>
onMount();
}

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,
});