Issue Mismatch ssr with dev__ssr for route with TrailingSlash

[simonjoom]

Mismatch ssr caused by location.pathname

I found an issue for route ending with a TrailingSlash
by example:
localhost/myroute/

if the route in .cache/match-paths.json contain without TrailingSlash
path: /myroute,

as a result location.pathname from Server is different than window.location.pathname from client
it's create SSR mismatch

solution to patch in src/utils/start-server.js ->

gatsby/packages/gatsby/src/utils/start-server.ts

Lines 505 to 512 in 308eb94

	const renderResponse = await renderDevHTML({
	path: pathObj.path,
	page: pathObj,
	skipSsr: req.query[`skip-ssr`] || false,
	store,
	htmlComponentRendererPath: `${program.directory}/public/render-page.js`,
	directory: program.directory,
	})

need to correct the path
replace pathObj.path to the original path req.path

    const renderResponse = await renderDevHTML({
      path: decodeURI(req.path), // patch
      page: pathObj,
      skipSsr: req.query[`skip-ssr`] || false,
      store,
      htmlComponentRendererPath: `${program.directory}/public/render-page.js`,
      directory: program.directory
    });

i did updated in reachroute the code below and it gave me this issue. (yes it s a snippet of old gatsby-link but it's work)
aria-current with test location.pathname === prefixedTo give true for client and false for Server due to the lack of "/" in the pathname

let Link = forwardRef(({ innerRef, ...props }, ref) => (
  <Location>
    {({ location, navigate }) => {
      let { to, state, replace, getProps = k, ...anchorProps } = props;
      // let href = resolve(to, baseuri);
      const prefixedTo = rewriteLinkPath(to, location.pathname)

      let isCurrent = location.pathname === prefixedTo;
      let isPartiallyCurrent = startsWith(location.pathname, prefixedTo);
      //ref={ref||innerRef}
      return (
        <a
          ref={innerRef}
          aria-current={isCurrent ? "page" : prefixedTo}
          {...anchorProps}
          {...getProps({ isCurrent, isPartiallyCurrent, prefixedTo, location })}
          href={prefixedTo}
          onClick={event => {
            if (anchorProps.onClick) anchorProps.onClick(event);
            if (shouldNavigate(event)) {
              event.preventDefault();
              navigate(prefixedTo, { state, replace });
            }
          }}
        />
      );
    }}
  </Location>
));

[simonjoom]

one update on this patch
better to create an other param , else matchpath feature is broken

    const renderResponse = await renderDevHTML({
      path: pathObj.path,
      pathorigin: decodeURI(req.path), // patch
      page: pathObj,
      skipSsr: req.query[`skip-ssr`] || false,
      store,
      htmlComponentRendererPath: `${program.directory}/public/render-page.js`,
      directory: program.directory
    });

need to add param in all renderDevHTML access

like here

gatsby/packages/gatsby/cache-dir/ssr-develop-static-entry.js

Line 50 in 308eb94

export default (pagePath, isClientOnlyPage, publicDir, error, callback) => {

to

export default (pagePath,pathorigin, isClientOnlyPage, publicDir, error, callback) => {

and

gatsby/packages/gatsby/cache-dir/ssr-develop-static-entry.js

Line 259 in 308eb94

<ServerLocation url={`${__BASE_PATH__}${pagePath}`}>

change to

<ServerLocation url={`${__BASE_PATH__}${pathorigin}`}>

[LekoArts]

Hi, thanks for the issue!

I see that your issue is about a specific experiment/flag we currently have. We collect any feedback (bug reports, feature requests, questions, etc.) inside a respective discussion in the Umbrella Discussions category.

Please direct your feedback here: #28138

Thanks!