score:3

Accepted answer

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.


Related Query

More Query from same tag