redux 如何与 next.js 一起工作？

Posted 2023-03-06

【中文标题】redux 如何与 next.js 一起工作？

【英文标题】：How redux works with next.js?

【发布时间】：2021-07-14 18:55:10

【问题描述】：

我需要将 redux 与现有的下一个项目集成。但目前，我不明白商店是如何在服务器端工作的。

我正在关注这个例子：

https://github.com/vercel/next.js/blob/canary/examples/with-redux/pages/ssg.js

export const initializeStore = (preloadedState) => 
  let _store = store ?? initStore(preloadedState)

  // After navigating to a page with an initial Redux state, merge that state
  // with the current state in the store, and create a new store
  if (preloadedState && store) 
    _store = initStore(
      ...store.getState(),
      ...preloadedState,
    )
    // Reset the current store
    store = undefined
  

  // For SSG and s-s-r always create a new store
  if (typeof window === 'undefined') return _store
  // Create the store once in the client
  if (!store) store = _store

  return _store

为什么要在服务端创建一个store，我问是因为在客户端也是这样创建的，最后用的是什么store。

如果在客户端创建了另一个完全不同的商店，为什么我需要在服务器中创建一个商店？

import  Provider  from 'react-redux'
import  useStore  from '../store'

export default function App( Component, pageProps ) 
  const store = useStore(pageProps.initialReduxState)

  return (
    <Provider store=store>
      <Component ...pageProps />
    </Provider>
  )

下面的组件定义也在客户端渲染？

export function useStore(initialState) 
  const store = useMemo(() => initializeStore(initialState), [initialState])
  return store

【参考方案1】：

这是为了 SEO 目的。当客户端向服务器发出请求时，如果您在服务器上获取数据，填充存储并将此数据发送给客户端，搜索引擎爬虫将看到您的网站是关于什么的，他们可以读取您发送的内容。

但您不需要在服务器上完全填充存储。例如，假设您有一个管理员页面，管理员可以访问您的应用或网站的用户。因此，当您在服务器上获取数据时，您的服务器会将一堆名称发送给客户端，这不会影响您的 SEO 结果。在这种情况下，在管理页面组件中，在“useEffect”中，您可以调度操作以从服务器获取用户列表。

假设您有一个电子商务网站，并在索引页面中展示您的产品。在这种情况下，最好在服务器上填充商店，以便搜索引擎爬虫可以读取您的产品并帮助您的 SEO 结果。要将存储与客户端同步，您还必须从客户端调度“水合物”操作以将数据传递到客户端存储。我认为在您的代码中“initializeStore()”正在处理这个问题。