大家的阅读是我发帖的动力，本文首发于我的博客：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的入参：

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，请见谅）：

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参数作为初始状态。

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。

// ...

let reduxStore: reduxStoreType | null = null

export default function ReduxProvider (/* ... */) {

  // ...

  storeRef.current = reduxStore = configureStore(initialState)

  // ...

}

export const getStore = () => reduxStore

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

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... 似乎并不太好：

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

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上。在客户端环境中，直接从这里取初始化的值。

// ...

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>

  ]

}

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

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 的特殊字符。

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 初始状态？的更多相关文章

  1. win10操作系统下oracle11g客户端/服务端的下载安装配置卸载总结

    win10操作系统下oracle11g客户端/服务端的下载安装配置卸载总结 一:前提 注意:现在有两种安装的方式 1. oracle11g服务端(64位)+oracle客户端(32位)+plsql(3 ...

  2. linux下svn(subversion)服务端添加工程及配置权限

    linux下svn(subversion)服务端添加工程及配置权限 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/9010507.html 此篇我只是将所做过的 ...

  3. Spring Boot框架下实现Excel服务端导入导出

    Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.今天 ...

  4. 线程同步——用户模式下线程同步——Interlocked实现线程同步

    线程同步分为用户模式下的线程同步和内核对象的线程同步. 当然用户模式下的线程同步实现速度比内核模式下快,但是功能也有局 //1.利用原子访问: Interlocked系列函数,关于Interlocke ...

  5. 微信app支付android客户端以及.net服务端实现

    由于公司运营需要,需要在客户端(android/ios)增加微信以及支付宝支付,在调用微信app支付时遇到一些问题,也算是一些踩过的坑,记录下来 ,希望能对.net开发者服务端网站更快的集成微信app ...

  6. Linux下搭建svn服务端

    安装 使用yum安装非常简单: yum -y install subversion (压缩包安装比这麻烦的多) Tortoise本是window下客户端工具,但也可以建仓库,作为服务端.Linux只有 ...

  7. Rsync 实现服务器文件的同步——服务端的安装配置

    一.安装rsync 直接使用yum命令进行安装即可. yum -y install rsync 二.配置文件 网上大多教程都说安装是默认没有配置文件的,但是经过我的尝试,yum安装下默认是有配置文件的 ...

  8. windows下搭建svn服务端、客户端

    1.安装SVN服务器subversion以及客户端TortoiseSVN,在网上下载windows版的subversion,TortoiseSVN并安装,比如我的服务端安装在了D:\Program F ...

  9. CentOS7下安装SVN服务端

    CentOS7下安装SVN服务 1. yum命令即可方便的完成安装# sudo yum install subversion 测试安装是否成功:# svnserve --version 更改svn的默 ...

  10. spring-oauth-server实践：使用授权方式四：client_credentials 模式的客户端和服务端交互

    spring-oauth-server入门(1-11)使用授权方式四:client_credentials 模式的客戶端 一.客户端逻辑 1.界面入口(credentials_access_token ...

随机推荐

  1. 镇海-APIO联合总结

    镇海考试见此处:https://www.cnblogs.com/british-union/p/liankao.html 考的是湖南省队集训,除了第一天有点头昏导致体验很差之外体验非常好,剩下两次考试 ...

  2. GIT如何进行团队协作

    加入其他开发成员.修改代码并提交 选择库点击管理 点击添加成员邀请用户 以下三种方式都行 加入后如下 第二人如何进行修改文件: 在文件夹中创建本地库git init 建立远程连接 git remote ...

  3. 【IDEA】IDEA上如何解决代码冲突

    首先,坐好准备工作,在feature-resolve-conflict分支上作如下改动: 在master分支作如下改动: 假如现在我们需要将master分支合并到feature-resolve-con ...

  4. rgba颜色转换为十六进制

    RGBA颜色转HEX 转换步骤: 先将r.g.b分别转换为十六进制,比如 r.g.b分别为 255,则转换后得到的为 FF.FF.FF 将a 乘以 255,然后获得的积的整数部分转换为十六进制,如 a ...

  5. Ubuntu下如何管理多个ssh密钥

    Ubuntu下如何管理多个ssh密钥 前言 ‍ 我一直在逃避这个问题,误以为我能够单纯地用一个 ssh 走天下. 好吧,现实是我不得不管理多个 ssh 做,那就写个博客总结一下吧. 查阅后发现前人已经 ...

  6. zstd压缩算法概述与基本使用

    本文仅关注zstd的使用,并不关心其算法的具体实现 并没有尝试使用zstd的所有功能模式,但是会简单介绍每种模式的应用场景,用到的时候去查api吧 step 0:why zstd? zstd是face ...

  7. Vue3生命周期钩子函数深度解析：从源码到实战的万字指南

    一.Vue3生命周期革新特性 相较于Vue2,Vue3通过Composition API带来了更灵活的生命周期管理方式.通过onBeforeMount等函数注册钩子时,实际是通过injectHook方 ...

  8. js发送get 、post请求

    前言 我们经常会用到js发送网络请求,这里用到XMLHttpRequest,主要是为了考虑早期的IE.分为三步:创建需要的对象.连接和发送.接收. GET请求 var httpRequest = ne ...

  9. Xshell连接VMware虚拟机中的CentOS

    步骤: 1. 检查Linux虚拟机的网络连接模式,确保它是NAT模式.(由于只在本机进行连接,所以没有选择桥接模式.当然,桥接模式的配置会有所不同,在此不做深入分析) 2. 在VMware works ...

  10. AI与.NET技术实操系列（九）：总结篇 ── 探讨.NET 开发 AI 生态：工具、库与未来趋势

    1. 引言 本文作为本系列的最后一篇,旨在全面探讨 .NET 生态中与 AI 相关的工具.库.框架和资源,帮助开发者了解如何在 .NET 环境中开发 AI 应用.我们将分析 Microsoft 的 A ...