Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering below:

Server Side Rendering | Redux Toolkit

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:

  • TypeScript
  • JavaScript

  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 
  
  function isHydrateAction(action: Action): action is PayloadAction<RootState> {
    return action.type === HYDRATE
  }
  
  export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: '/' }),
    extractRehydrationInfo(action, { reducerPath }): any {
      if (isHydrateAction(action)) {
        return action.payload[reducerPath]
      }
    },
    endpoints: (build) => ({
      
    }),
  })
  

  next-redux-wrapper rehydration example

  import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
  import { HYDRATE } from 'next-redux-wrapper'
  
  function isHydrateAction(action) {
    return action.type === HYDRATE
  }
  
  export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: '/' }),
    extractRehydrationInfo(action, { reducerPath }) {
      if (isHydrateAction(action)) {
        return action.payload[reducerPath]
      }
    },
    endpoints: (build) => ({
      
    }),
  })
  

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.

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:

  • TypeScript
  • JavaScript

  import {
    buildCreateApi,
    coreModule,
    reactHooksModule,
  } from '@reduxjs/toolkit/query/react'
  
  const createApi = buildCreateApi(
    coreModule(),
    reactHooksModule({ unstable__sideEffectsInRender: true }),
  )
  

  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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4