react-seo-friendly-spa-template icon indicating copy to clipboard operation
react-seo-friendly-spa-template copied to clipboard

Hydration Issues After Build

Open OGoodness opened this issue 2 years ago • 5 comments

image

Corresponding Error Codes:

  • https://reactjs.org/docs/error-decoder.html/?invariant=423
  • https://reactjs.org/docs/error-decoder.html/?invariant=418
  • https://reactjs.org/docs/error-decoder.html/?invariant=425

Not too familiar with hydration, is this worth addressing?
Will it affect SEO or performance?

OGoodness avatar Jan 11 '23 01:01 OGoodness

@OGoodness - After looking for potential causes of the errors I believe the culprit was the use of the <p> tag to wrap another element (this is known to cause issues in SSR). I replaced the two offending instances with <div> tags, so hopefully that resolves it. If it does not let me know and I can dig deeper.

Thanks!

based-ghost avatar Jan 16 '23 03:01 based-ghost

Doesn't seem to resolve this for me.
Here's the process I'm using to host/build the UI if it helps:

  1. npm run build
  2. docker-compose up

Dockerfile

FROM nginx
COPY ./build/ /usr/share/nginx/html/

docker-compose.yml

version: "2"
services:
  web:
    build: . # Path to dockerfile
    ports:
      - "2233:80"
      - "2234:443"

Using your repo directly, so everything else should be the same

OGoodness avatar Jan 17 '23 20:01 OGoodness

@based-ghost I'm not very familiar with this form of SSR, do these errors even matter from a performance or SEO standpoint?

OGoodness avatar Jan 26 '23 14:01 OGoodness

@OGoodness - sorry, forgot to push an update for this issue (after which I'm not recieving any errors). I looked through react-snap source code/documentation and came across configurations to handle "third-party requests", or in our case, anayltics requests. The following entry needed to be added to package.json:

"reactSnap": {
  "skipThirdPartyRequests": true
}

This does directly impact the static HTML that is generated during the prerender step and, therefore, has all the potential to impact SEO. During the build process you may notice the following error logged (per route): Failed to load resource: net::ERR_FAILED. This is a non-issue as it represents the analytics request being intercepted.

Also, I think my first comment/fix can be ignored as that issue should be unique to SSR - not SSG.

based-ghost avatar Feb 09 '23 23:02 based-ghost

Thank you! Sorry for the debug request, not as familiar with the different intricacies of UI rendering and it's effect on SEO or response time. I'll test this out when I can!

OGoodness avatar Feb 10 '23 23:02 OGoodness