SSR not working, html source just shows the loading... about with-next-redux-wrapper-redux-persist HOT 12 CLOSED

I �has build you example, but i see it only show loading... @fazlulkarimweb ,

from with-next-redux-wrapper-redux-persist.

Change your app.js to this and let me know.

import App from 'next/app';
import { wrapper } from '../store/store';
import { useStore } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

function MyApp({ Component, pageProps }) {
  const store = useStore((state) => state);
  return process.browser ? (
    <PersistGate persistor={store.__persistor} loading={<div>Loading</div>}>
      <Component {...pageProps} />
    </PersistGate>
  ) : (
    <PersistGate persistor={store}>
      <Component {...pageProps} />
    </PersistGate>
  );
}

export default wrapper.withRedux(MyApp);

from with-next-redux-wrapper-redux-persist.

@Ramtis i am wondering if we need to to do this https://github.com/kirill-konshin/next-redux-wrapper#server-and-client-state-separation

from with-next-redux-wrapper-redux-persist.

I have attached SSR example in my code under the SSR folder. It works perfectly from my end without any problem. Please see this example - https://github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist/blob/master/pages/ssr/index.js

Did this piece of the aforementioned code run on your computer perfectly? It works on my computer perfectly.

from with-next-redux-wrapper-redux-persist.

Hi! i found this boilerplate facing the same issue that a lot of people has. This wrapper works but SSR its not working, there is a workaround with this issue? Thanks in advance!

Are you fixed? I have same isue

from with-next-redux-wrapper-redux-persist.

@trangchongcheng I have given a complete update of this boilerplate. These issues probably emerged from the very old packages and redux-persists new updates. I have changed the redux-persists storage method. Please, pull the current repo (updated a few minutes ago) repo and see if the problem is solved. Please, let me know again if the same problem persists. I will try my best to solve the issue.

from with-next-redux-wrapper-redux-persist.

@trangchongcheng I have given a complete update of this boilerplate. These issues probably emerged from the very old packages and redux-persists new updates. I have changed the redux-persists storage method. Please, pull the current repo (updated a few minutes ago) repo and see if the problem is solved. Please, let me know again if the same problem persists. I will try my best to solve the issue.

Thank for reply.
I have pull new source but when i building, it still above issue...Many peopel have same isue, like this:
vercel/next.js#8240

from with-next-redux-wrapper-redux-persist.

I have taken this code snippet from the official Next js website. There is no store or any other dependency. You can create a page in your Next js folder. Then run the npm run build and see the result. Then you will understand what is the expected code in the previous redux-based solution. I see similar results. I think it will help you understand the expected result.

import React from 'react';
import axios from 'axios';

function Users({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  );
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  };
}

export default Users;

from with-next-redux-wrapper-redux-persist.

I using like below, it working but it maybe not best practice because it throw warningWarning: Did not expect server HTML to contain a <div> in <div>

const MyApp = ({ Component, pageProps }: Props) => {
  const store: StoreType = useStore();

  const getLayout =
    Component.getLayout ||
    ((page: ReactNode) => <SiteLayout isFull={false}>{page}</SiteLayout>);

  const app = (
    <Chakra>
      <AppContextProvider>
          <PostContextProvider>
            {getLayout(<Component {...pageProps} />)}
          </PostContextProvider>
      </AppContextProvider>
    </Chakra>
  );
  if (typeof window !== 'undefined') {
    return (
      <PersistGate persistor={store.__PERSISTOR as Persistor} loading={null}>
        {app}
      </PersistGate>
    );
  } else {
    return app;
  }

So many topic about this issue:
rt2zz/redux-persist#926
vercel/next.js#8240 (comment)
https://stackoverflow.com/questions/58238525/gatsby-not-generating-correct-static-html-files/62501513#62501513

from with-next-redux-wrapper-redux-persist.

I have taken this code snippet from the official Next js website. There is no store or any other dependency. You can create a page in your Next js folder. Then run the npm run build and see the result. Then you will understand what is the expected code in the previous redux-based solution. I see similar results. I think it will help you understand the expected result.

If not using redux-persist, you can see when we use npm run build then static HTML will render between

from with-next-redux-wrapper-redux-persist.

@fazlulkarimweb Actually this issue ought to be opened. I have the same issue, and I followed your practice step-by-step, from the readme here: https://github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist

It is working, but if you disable javascript in the browser, you'll see a white screen, or whatever you provided to loading={} prop on PersistGate.

Also I notice your current repo differs from your readme file: https://github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist/blob/master/pages/_app.js

Is the readme up to date?

from with-next-redux-wrapper-redux-persist.

@fazlulkarimweb Actually this issue ought to be opened. I have the same issue, and I followed your practice step-by-step, from the readme here: https://github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist

It is working, but if you disable javascript in the browser, you'll see a white screen, or whatever you provided to loading={} prop on PersistGate.

Also I notice your current repo differs from your readme file: https://github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist/blob/master/pages/_app.js

Is the readme up to date?

Issues #22 - I have explained this in detail here now. Let's discuss the issues there instead.

from with-next-redux-wrapper-redux-persist.