search

fazlulkarimweb / with-next-redux-wrapper-redux-persist

A counter app(or boilerplate) with next redux wrapper, redux persist and redux thunk for your NEXT JS website.
164 stars 38 forks source link

Unfortunately this repository is not SEO friendly #22

Closed simplenotezy closed 2 years ago

simplenotezy commented 2 years ago

As reported in this issue: https://github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist/issues/8

The main issue with using Redux and Redux-persist with Next.js is still not solved.

Steps to reproduce:

  1. Download this repo
  2. Run npm install && npm run dev
  3. Open chrome and disable Javascript in the browser (or view source)
  4. See a white screen (no content loaded == not good for SEO)
theodorebear commented 2 years ago

remove the PersistGate wrapping your components in _app. this waits for rehydration before showing anything, which removes the benefits of SSR.

source: i am not an expert on next-redux-wrapper, but i've been using it for over a year. I'm new to this fork but i like it so far.

fazlulkarimweb commented 2 years ago

@simplenotezy Thanks for asking this. The test you have done is a common test. It's because the boilerplates are waiting for rehydrating. As JS is off, it can't rehydrate the states. If you want to pass this test, just stop wrapping the index.js. Wrap only the dashboard or other authenticated pages. Besides, use next-seo plugins!

Besides, I thought adding different multiple pages was beyond the scope of this project and makes it harder to understand for some developers as I will be wrapping two kinds of index pages. But, I will add this surely in the future as some of you guys are already pointing towards this. Please wait for a few days.

I personally use this repository for creating dashboards or creating authenticated components. I use useSWR for loading data. The old ideas regarding SEO friendliness are diminishing. I also found that Google correctly picked up my pure react websites earlier! I have built projects with this boilerplate and modern SEO engines are behaving fine with me. I use next-seo plugins for that. Though some older SEO engines are not okay with this yet. Hopefully, their crawler will be smarter in the future.

The purest solution is to follow the good ol' approach. The homepage should be a plain tailwind HTML/Gatsby/WordPress/Pure NextJS page! Dashboards will be in another subdomain like dash.yourdomain.com (like Cloudflare). You can use all of the fancy plugins without thinking about speed, SEO, and other compliance stuff! But it requires a lot of effort. Big companies and mature projects mostly follow this approach AFAIK. But you can always use the first approach for the hobby to mid-level projects.

Thanks, @theodorebear for your valuable inputs.

If you have any other queries regarding this fact, please feel free to ask.

simplenotezy commented 2 years ago

What @theodorebear recommended is also what I ended up doing. That's a fine solution so far. Hope it gets fixed / worked around somehow though! :)

fazlulkarimweb commented 2 years ago

What @theodorebear recommended is also what I ended up doing. That's a fine solution so far. Hope it gets fixed / worked around somehow though! :)

Yeah, I don't like these client-side workarounds too. Client-side logic should be simple and stupid. In my experience, if we are working at scale, these problems should be solved from the server-side. it will be the most stable solution. Again that's a trade-off. Server-side logic is costly. For example, using Redis for storing complex states can be a server-side solution. You can store a unique identifier key in the cookies if you want to avoid local storage as a whole. Call the key and get the particular state while generating SSR or SSG pages! Every time a user visits, get the unique identifier from the cookie, finally retrieve the compressed state from the Redis with that identifier. You will be able to utilize the very best of SSR and SSG in that case!

simplenotezy commented 2 years ago

True, but in that case it's not easy to offload your static website to e.g. Cloudflare to get a global deployment.