gatsby: Client side only paths do not update dom properly on direct linking

Description

When you use client only paths, if you refresh on any client only page the dom isn’t properly updated. It causes the dom from the initial root page to stick around and breaks the other client side pages. This does not happen locally, but it happens in production environments both on netlify and s3/cloudfront

I noticed this on my own project, where going directly to a client side route was adding the component into my root client side route’s structure.

So something like

// app/login
<div class="container">
  <h1>Login</h1>
</div>

and another component like

// app/profile
<div class="different-container">
  <h2>Profile</h2>
</div>

But instead in the browser I see

<div class="container">
  <div class="different-container">
    <h2>Profile</h2>
  </div>
</div>

I am unable to reproduce using npm run build && npm run serve locally

Steps to reproduce

Go to the example https://client-only-paths.gatsbyjs.org/ click on any other page that is not the 1st page. Then click refresh. You will see that the background color is not the correct color but is instead the background color for page 1

You can also go directly to https://client-only-paths.gatsbyjs.org/page/4 and see that the background color is that of page 1 instead of purple like it should be

Expected result

The background color should be the appropriate color for the page.

Actual result

The background color is incorrect

Environment

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 23 (12 by maintainers)

Most upvoted comments

It seems to be a hydration problem. There’s a mismatch between the server-rendered output and the actual client-only output.

For now a temporary workaround is disabling server-rendering on those client-only paths.

// https://github.com/gatsbyjs/gatsby/blob/master/examples/client-only-paths/src/pages/index.js

...
export default props => {
  if (typeof window === 'undefined') return null
  return <App {...props} />
}

Can check out the examples here: original https://buggy-client-only-paths.netlify.com/page/3 with workaround https://non-buggy-client-only-paths.netlify.com/page/3

universse on Nov 1, 2019

I cloned from https://github.com/gatsbyjs/gatsby/blob/master/examples/client-only-paths and that was the only modification I made.

What your example is missing is gatsby-plugin-netlify to handle redirect from /sample/* to /sample/. Without this, the 404 page is temporarily shown, causing the flash.

universse on Nov 12, 2019

this ngnix config file in caprover’s deployment fixed it for the codebox’s sample

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /sample {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /sample/index.html;
  }

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

s-kris on Nov 13, 2019