大家的阅读是我发帖的动力，本文首发于我的博客：deerblog.gu-nami.com/，欢迎大家来玩，转载请注明出处喵。

🎈前言

Next.js 是一个广受欢迎的 React 服务端渲染（Server Side Rendering，SSR）框架。Next.js 的页面会先在服务端渲染一次，然后把结果传给浏览器，也就是客户端，再在客户端渲染一遍，并且运行客户端特有的逻辑。如果使用 Redux，一般情况下，在服务端渲染的时候，初始化了的 Redux 全局状态会被创建。然而服务器返回的是只有 HTML 标签的页面，客户端无法获得服务端 Redux 的状态，会引起水合错误，依赖 Redux 的组件渲染异常等影响体验的问题。我们需要同步服务端的 Redux 状态。

在 Page Router 模式下，Redux 同步状态已经有了成熟的解决方案，可以使用 next-redux-wrapper 完成，但是它并不适用于 App Router 模式的应用。这里参考 Redux 文档的方法，给出一些个人在 Next.js 上同步 Redux 状态的小技寄巧，也只是一些个人做法，大佬们肯定有更优雅的方法的。

🎀解决思路

先来看createStore的入参：


ts
export declare function createStore<S, A extends Action, Ext, StateExt>(
  reducer: Reducer<S, A>,
  preloadedState?: PreloadedState<S>,
  enhancer?: StoreEnhancer<Ext>
): Store<S & StateExt, A> & Ext

第二个参数preloadedState是store的初始状态，只要在服务端 / 客户端中，都传入一样的内容，就可以创建两个状态一模一样的store。

服务端渲染时，初始状态可在服务端组件（React Server Component，RSC）中直接查询获得。在客户端中，如果走网络请求，则在首次渲染中是拿不到服务端状态的。我们不妨把状态写入 HTML 中，带往客户端，然后客户端就可以同步服务端 Redux 的状态了。

我们先来以我博客的统计数据为例，这是目前的效果：

🎉服务端渲染阶段初始化 Redux

先写一个创建 Redux 的代码（~~代码很大一部分是从老项目中迁移的，当时并没有用上 Redux Toolkit，请见谅~~）：


ts
import { thunk } from 'redux-thunk'
import { compose, createStore, applyMiddleware, StoreEnhancer, Store, EmptyObject } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer, { combinedStateType } from './rootReducers'
let storeEnhancers: StoreEnhancer
if (process.env.NODE_ENV === 'production') {
  storeEnhancers = compose(applyMiddleware(thunk))
} else {
  storeEnhancers = compose(composeWithDevTools(applyMiddleware(thunk)))
}
export type reduxStoreType = Store<EmptyObject & combinedStateType>
export const configureStore = (initialState = {}) => {
  return createStore(rootReducer, initialState, storeEnhancers)
}

我们可以在Provider中完成初始化，毕竟 RSC 需要以组件的形式组织代码，而且后面useSelector、useDispatch之类的钩子也需要它。这里ReduxProvider接收data参数作为初始状态。


ts
import { configureStore, reduxStoreType } from "./index"
export default function ReduxProvider ({
  children, data
}: {
  children: React.ReactNode, data: any
}) {
  const storeRef = useRef<reduxStoreType | null>(null)
  const initialState = data
  if (!storeRef.current) {
    storeRef.current = configureStore(initialState)
  }
  return <Provide store={storeRef.current}>{children}</Provider>
}

导出一个获取方法，以便 React 组件外的代码可以使用 Redux。


ts
// ...
let reduxStore: reduxStoreType | null = null
export default function ReduxProvider (/* ... */) {
  // ...
  storeRef.current = reduxStore = configureStore(initialState)
  // ...
}
export const getStore = () => reduxStore

在 src/app/layout.tsx 中使用这个ReduxProvider。到这里，其实服务端初始化 Redux 已经完成了。


ts
import { getArticleData } from "@/request/ssr/article";
import RootLayoutInner from "./layoutInner";
import ReduxProvider from "@/redux/reduxProvider";
export default async function RootLayout ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const data = {
    article: await getArticleData()
  }
  
  return <html lang="en">
    <head>
      {/* ... */}
    </head>
    <body>
      <ReduxProvider data={data}>
        <RootLayoutInner >
          { children }
        </RootLayoutInner>
      </ReduxProvider>
    </body>
  </html>
}

getArticleData函数获取服务端的数据传进了ReduxProvider中，成为了 Redux 的初始状态，服务端已经可以渲染出具有 Redux 初始状态的页面了。

来看看现在的效果，emmmmmm… 似乎并不太好：

看看控制台… 给了我们几个水合错误。


cmd
Uncaught Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "53" Client: "0"

可以发现服务端传回来的 HTML 是有数据的，但是客户端渲染时并没有拿到数据。接下来客户端就需要同步这个状态了。

🎨客户端同步 Redux 状态

我们可以通过<script>标签，在客户端把初始状态挂到window.DATA_TO_SYNC_REDUX上。在客户端环境中，直接从这里取初始化的值。


ts
// ...
const id = 'redux-initializer-json-data'
export default function ReduxProvider (/* ... */) {
  children: React.ReactNode, data: any
}) {
  const storeRef = useRef<reduxStoreType | null>(null)
  let initialState
  if (!BROWSER_ENV) {
    initialState = data
  } else {
    try {
      // @ts-ignore
      initialState = JSON.parse(window.DATA_TO_SYNC_REDUX)
    } catch (error) {
      logger.log(error)
      initialState = {}
    }
  }
  if (!storeRef.current) {
    storeRef.current = reduxStore = configureStore(initialState)
  }
  const text = `window.DATA_TO_SYNC_REDUX=\`${(JSON.stringify(data))}\``
  BROWSER_ENV && setTimeout(() => {
    document.getElementById(id)?.remove()
  }, 100)
  return [
    <script key={id} id={id}>{text}</script>,
    <Provider key='redux-provider' store={storeRef.current}>{children}</Provider>
  ]
}

看起来到这里已经完成了，页面正常运行，但是一打开控制台，马上就给了我们一大堆报错，（~~虽然不管也行~~）：


cmd
Uncaught Error: Text content does not match server-rendered HTML.
Warning: Text content did not match.
Server: "window.DATA_TO_SYNC_REDUX=`{&quot;article&quot;:{...}}`"
Client: "window.DATA_TO_SYNC_REDUX=`{"article":{...}}`"

看起来我们<script>的代码不知道为什么在服务端被转码了，在客户端第一次渲染渲染时又被转了回来，造成了水合错误。这里搜了一下也没有发现什么优雅的解决方法，我们就手动转码一下，绕开 HTML 的特殊字符。


ts
const tokens: Record<string, string> = {
  '!lt;': '<',
  '!gt;': '>',
  '!nbsp;': ' ',
  '!amp;': '&',
  '!quot;': '"'
}
const invTokens: Record<string, string> = {
  '<': '!lt;',
  '>': '!gt;',
  ' ': '!nbsp;',
  '&': '!amp;',
  '"': '!quot;'
}
export function pseudoHtml2Escape (htmlString: string) {
  return htmlString.replace(/(!(lt|gt|nbsp|amp|quot);)/ig, function (t: string) {
    return tokens[t]
  })
}
export function escape2PseudoHtml (escapeString: string) {
  const res = escapeString.replace(/(<|>| |&|")/g, function (_, t: string) {
    return invTokens[t]
  })
  return res
}
export default function ReduxProvider (/* ... */) {
  // ...
  initialState = JSON.parse(pseudoHtml2Escape(window.DATA_TO_SYNC_REDUX))
  // ...
  const text = `window.DATA_TO_SYNC_REDUX=\`${escape2PseudoHtml(JSON.stringify(data))}\``
  // ...
}

到这里同步服务端状态已经完成了。来看看最终效果：

🎁结语

本文简单地实现了 Next.js App Router 下客户端同步服务端 Redux 状态的方法。其中状态的传递主要通过 HTML 代码来进行，~~总感觉是不是不太优雅~~。大体流程如下所示：

graph LR
subgraph "服务端渲染"
  RootLayout -->|传入数据|B[ReduxProvider]-->|初始化|Redux
  B -->|传入初始值| script
end
subgraph "浏览器"
  script -->|记录初始值| window
  ReduxProvider --> |获取数据|window
  ReduxProvider-->|初始化|A[Redux]
end

Next App Router 模式下，如何同步服务端 Redux 初始状态？

🎈前言

🎀解决思路

🎉服务端渲染阶段初始化 Redux

🎨客户端同步 Redux 状态

🎁结语