Skip to main content

Server Side Rendering

Server Side Rendering with Next.js

RTK Query supports Server Side Rendering (SSR) with Next.js via rehydration in combination with next-redux-wrapper.

The workflow is as follows:

  • Set up next-redux-wrapper

  • In getStaticProps or getServerSideProps:

    • Pre-fetch all queries via the initiate actions, e.g. store.dispatch(api.endpoints.getPokemonByName.initiate(name))
    • Wait for each query to finish using await Promise.all(dispatch(api.util.getRunningQueriesThunk()))
  • In your createApi call, configure rehydration using the extractRehydrationInfo option:

    next-redux-wrapper rehydration example
    import type { Action, PayloadAction } from '@reduxjs/toolkit'
    import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
    import { HYDRATE } from 'next-redux-wrapper'

    type RootState = any // normally inferred from state

    function isHydrateAction(action: Action): action is PayloadAction<RootState> {
    return action.type === HYDRATE
    }

    export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: '/' }),
    extractRehydrationInfo(action, { reducerPath }) {
    if (isHydrateAction(action)) {
    return action.payload[reducerPath]
    }
    },
    endpoints: (build) => ({
    // omitted
    }),
    })

An example repo using next.js is available here.

tip

While memory leaks are not anticipated, once a render is sent to the client and the store is being removed from memory, you may wish to also call store.dispatch(api.util.resetApiState()) to ensure that no rogue timers are left running.

tip

In order to avoid providing stale data with Static Site Generation (SSG), you may wish to set refetchOnMountOrArgChange to a reasonable value such as 900 (seconds) in order to allow data to be re-fetched when accessed if it has been that long since the page was generated.

Server Side Rendering elsewhere

If you are not using next.js, and the example above cannot be adapted to your SSR framework, an unstable__ marked approach is available to support SSR scenarios where you need to execute async code during render and not safely in an effect. This is a similar approach to using getDataFromTree with Apollo.

The workflow is as follows:

  • Create a version of createApi that performs asynchronous work during render:

    import {
    buildCreateApi,
    coreModule,
    reactHooksModule,
    } from '@reduxjs/toolkit/query/react'

    const createApi = buildCreateApi(
    coreModule(),
    reactHooksModule({ unstable__sideEffectsInRender: true })
    )
  • Use your custom createApi when calling const api = createApi({...})

  • Wait for all queries to finish using await Promise.all(dispatch(api.util.getRunningQueriesThunk())) before performing the next render cycle