Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hydration Issues After Build #5

Open
OGoodness opened this issue Jan 11, 2023 · 5 comments
Open

Hydration Issues After Build #5

OGoodness opened this issue Jan 11, 2023 · 5 comments

Comments

@OGoodness
Copy link

image

Corresponding Error Codes:

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

@based-ghost
Copy link
Owner

@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
Copy link
Author

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
Copy link
Author

@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 added a commit that referenced this issue Feb 9, 2023
…s related requests from executing during static html generation
@based-ghost
Copy link
Owner

@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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants