redux如何与next.js配合使用

Question

我需要将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 SSR always create a new store
if (typeof window === 'undefined') return _store
// Create the store once in the client
if (!store) store = _store
return _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
}

Answer 1

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

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

假设你有一个电子商务网站，在索引页面上显示你的产品。在这种情况下，最好在服务器上填充商店，这样搜索引擎爬虫就可以读取你的产品，这有助于你的SEO结果。为了将商店与客户端同步，您还必须发送"；水合物"；客户端将数据传递到客户端存储的操作。我认为在你的代码中"；initializeStore(("正在处理。