based-ghost / react-seo-friendly-spa-template

React PWA/SPA template initially scaffolded with CRA (Create React App) and configured for SEO. Makes use of prerendering and other techniques/packages in order to achieve a perfect "Lighthouse Score".
MIT License
52 stars 21 forks source link

Hydration Issues After Build #5

Open OGoodness opened 1 year ago

OGoodness commented 1 year ago

image

Corresponding Error Codes:

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

based-ghost commented 1 year ago

@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!

OGoodness commented 1 year ago

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 commented 1 year ago

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

based-ghost commented 1 year ago

@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.

OGoodness commented 1 year ago

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!