score:3
in the end, this way only worked even the server and client state separation did not work
with this jsondiffpatch
rootreducer.js
const rootreducer = createreducer(
combinedreducers(undefined, { type: '' }),
(builder) => {
builder
.addcase(hydrate, (state, action) => {
const statediff = diff(state, action.payload);
const isdiff = statediff?.test?.data?.[0];
const isdiff1 =
statediff?.test1?.data?.[0]
return {
...state,
...action.payload,
test: isdiff ? action.payload.test : state.test,
test1: isdiff1 ? action.payload.test1 : state.test1,
};
})
.adddefaultcase(combinedreducers);
}
);
the only problem here is that you have to test every change in every piece inside the state
i'll leave the best answer until the end of the bounty, thank you all.
update: cuz a global hydrate reducer can be overkill. here is an example to handle hydration in each slice
import { createslice, createasyncthunk } from '@reduxjs/toolkit';
import { diff } from 'jsondiffpatch';
import { hydrate } from 'next-redux-wrapper';
const initialstate = {
data: [],
};
export const testfetch = createasyncthunk(
'testfetch',
async (data, { rejectwithvalue, dispatch }) => {
try {
const response = await fetch(
'https://jsonplaceholder.typicode.com/users'
);
const d = await response.json();
return d;
} catch (error) {
return rejectwithvalue(error.response.data.error);
}
}
);
const test = createslice({
name: 'test',
initialstate,
reducers: {
update: {
reducer: (state, { payload }) => {
return { ...state, data: payload };
},
},
},
extrareducers: {
[hydrate]: (state, action) => {
const statediff = diff(state, action.payload);
const isdiff1 = statediff?.server?.[0]?.test?.data?.[0];
// return {
// ...state,
// data: isdiff1 ? action.payload.server.test.data : state.data,
// };
state.data = isdiff1 ? action.payload.server.test.data : state.data;
},
[testfetch.fulfilled]: (state, action) => {
state.data = action.payload;
},
},
});
export const { update } = test.actions;
export default test.reducer;
score:2
1.) does using redux with nextjs eliminate the seo advantage?
no, using redux with nextjs does not hinder the seo advantage. redux goes well with nextjs.
the problem lies with your implementation of the data fetching. nextjs does not see the fetched content, because you need to fetch it in either getinitialprops
, getserversideprops
, or getstaticprops
depending on the way you want your app to work.
see the data fetching documentation from nextjs.
note that getserversideprops
and getstaticprops
are the recommended ways of dealing with data fetching.
if you go for getstaticprops
, you will need getstaticpaths
. check this answer to see use cases and the difference between the getstaticpaths
and getstaticprops
as it can be confusing.
tldr; instead of putting the data fetching in a useeffect hook, move it inside a getserversideprops
or a getstaticprops
function.
Source: stackoverflow.com
Related Query
- Redux toolkit store reset automatically in navigating between pages in next js
- images being duplicated when navigating between pages in redux / react application
- Initialize Redux Toolkit store via url params on Next 12+ SSR
- How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?
- Redux store reset on route change on his own with nextJS
- How to mock store in redux toolkit
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How to reset a redux slice state with Redux Toolkit (RTK)
- A state mutation was detected between dispatches, Redux toolkit and selectors/reselect
- How to reset Redux Store using Redux-Toolkit
- Keep selected filters when navigating between pages
- Using NextJS with Redux. Should the store be re-initialised between pages with different preloaded states?
- react / redux toolkit useSelector not updating when store state changed
- React Redux will not reset store of some component
- ElectronJS - sharing redux store between windows?
- redux store state between page route
- How to share data between two slice reducers redux toolkit
- How to reset the state of a Redux store using connected-react-router?
- Expected 0 arguments, but got 1 while passing arguments to the async func in redux toolkit store
- State from redux store gets lost/ reset when changing route
- Using redux / toolkit for state slicing between components
- Difference in accessing props after change in redux store between React class component and React functional component
- Does the size of Redux Store grow every time I change pages in my App?
- Flash of previous page while navigating between pages in react js application
- React Redux - Keep the same URL while navigating to different pages
- Read and write to Redux store from multiple pages of a Gatsby App
- Difference between createSelector and createDraftSafeSelector API in Redux Toolkit
- Share actions between slices with Redux Toolkit
- Store item to local storage after adding a new item using redux toolkit
- why redux store becomes empty in next js when I navigate from one page to another page?
More Query from same tag
- Why is React not updating state and display in real-time?
- Formik scroll to the first invalid section after clicking on submit button
- react - pass parent value to child input value
- Material UI Rating wrapping long values
- Deployd and universal/isomorphic React app
- Routing pages into components: React
- Is there a way to start Mocha tests from a React UI?
- React Redux Pagination
- using react-chartjs-2 , How can I save my chart as png using a download button
- useEffect and ESlint exhaustive-deps rule
- Why are backticks returning undefined in React
- React modal scroll to top
- Set bootstrap switch component to 'checked' if mode is Dark
- Material Ui divider error (The above error occurred in the <hr> component)
- React router - calling same method outside componentDidMount
- How can I stop the Select component from closing when I clicked one of its item(Input element) - react antd
- React - Is useState 's setter function able to change?
- How should I hang onto the ag-grid api with React Hooks
- React native Unable to use local tmp file path for Image.source iOS
- Confusion in Reactjs keys
- React.js router element error stated as null
- React Bootstrap and deep linking tabs
- Express + Webpack error after page reload
- Need some advice with React connect()
- Condition for Input field to enter less amount compared to other Input field in React
- Warning "Please enter 8 characters" and "Both passwords should match" pops up already as soon as started typing
- How to display dynamic events in react-big-calendar?
- Setting event handlers on react hooks (useEffect)
- Mapping checkboxes inside checkboxes ReactJS
- React JS: Differentiate between Click and Click + Shift event