next-redux-cookie-wrapper

next-redux-cookie-wrapper

A next-redux-wrapper extension to sync a subset of a client's Redux state with cookies such that it survives page reloads and is available to the server during SSR :cookie: :sparkles:

Motivation

When it comes to Redux state persistence, Redux Persist is a popular choice. With Next.js, however, the persisted state is (without further ado) not available during SSR. Hence, the first render on the client side may largely differ from the server-rendered markup. A solution to this is a storage method that is available to both the server and the client by default: Cookies.

This library started as a drop-in replacement for next-redux-wrapper that built upon Redux Persist and a storage adapter for cookies. However, in response to getStaticProps() and getServerSideProps() being introduced in Next.js, it has been rewritten and the tooling has been simplified significantly. What remains is a single Redux middleware and a tiny wrapper around the makeStore() function.

How does it work?

On the server, a wrapper around makeStore() passes the Next.js context to the middleware via an action. The middleware then reads the cookies and dispatches an initial HYDRATE action with the client's state. On server-side state changes, set-cookie headers are set to update the client's cookies.

Similarly, the client updates cookies whenever a relevant portion of the state changes. Moreover, the HYDRATE action is intercepted on the client and the configured state subtrees are (by default) parsed from the cookies instead of the retrieved JSON data. This way, incoming state updates from getStaticProps() do not overwrite the synced state subtrees as getStaticProps() does not update the cookies. You can opt out of this behavior on a per-state-subtree basis and instead always receive the server's state in the HYDRATE reducer if you wish to handle state portions from getStaticProps() on your own.

Some words about compression: By default, the serialized cookie state is compressed using lz-string to keep the cookie size small. You can disable compression globally or per state subtree by setting the compress option to false.

Setup

TL;DR

For a quick working example, check out the demo project in this repository. It uses Redux Toolkit but that should not discourage you.

• Clone the repository
• Make sure you have have NPM v7 or later installed (npm i -g "npm@>=7"; required for the workspaces feature)
• Run npm install in the root directory
• cd demo && npm start
• Inspect the setup in store.ts

If you do not have next-redux-wrapper set up, follow their installation instructions. Afterwards, install next-redux-cookie-wrapper:

npm install --save next-redux-cookie-wrapper

and configure your store to use nextReduxCookieMiddleware by passing it to createStore() and wrapping your makeStore() function with wrapMakeStore():

+ import {nextReduxCookieMiddleware, wrapMakeStore} from "next-redux-cookie-wrapper";

...

- const makeStore = () => createStore(reducer);
+ const makeStore = wrapMakeStore(() =>
+   createStore(
+     reducer,
+     applyMiddleware(
+       nextReduxCookieMiddleware({
+         subtrees: ["my.subtree"],
+       })
+     )
+   )
+ );

That's it! The state of my.subtree should now be synced with a cookie called my.subtree and available on the server during SSR. If not, you can set the debug flag of next-redux-wrapper to true to get some insights on the state:

export const wrapper = createWrapper<AppStore>(makeStore, {debug: true});

Usage with Redux Toolkit

When using Redux Toolkit, it is important that nextReduxCookieMiddleware is used before any of the default middlewares:

const makeStore = wrapMakeStore(() =>
  configureStore({
    reducer: {...},
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().prepend(
        nextReduxCookieMiddleware({
          subtrees: ["my.subtree"],
        })
      ),
  })
);

The reason for this is that Redux Toolkit by default adds a serializability middleware that would complain about the SERVE_COOKIES action which wrapMakeStore() uses to pass the Next.js context to nextReduxCookieMiddleware. When nextReduxCookieMiddleware is invoked before the serializability middleware, it catches the SERVE_COOKIES action before it reaches that middleware. Alternatively, you can also configure the serializability middleware to ignore the SERVE_COOKIES action, should you prefer that.

Configuration

For the configuration options of nextReduxCookieMiddleware, please refer to the API documentation.