Do not scroll to top if the URL pathname has not changed (#813)

* Do not scroll to top if the URL pathname has not changed

* Refactor: initialize currentPath

* Fix mobile navigation resetting scroll

* Revert "Refactor: initialize currentPath"

This reverts commit c40d022.

* Remove router logic from server bundle and split client bundle in smaller chunks (#832)

* Change RouterClient to be a shared component to reduce server bundle size

* Change ServerStateProvider to be a shared component and avoid extra bundling in client build

* Update changeset

.changeset/cool-swans-thank.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Do not scroll to top if the URL pathname has not changed.

.changeset/twenty-moose-wait.md

@@ -0,0 +1,6 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Remove Router client-only logic from server bundle and avoid extra waterfall requests during Hydration.
+Extract part of the client bundle into separate modules that can be loaded in parallel.

examples/template-hydrogen-default/src/components/MobileNavigation.client.jsx

@@ -1,27 +1,27 @@
-import {Fragment, useEffect, useState} from 'react';
+import {Fragment, useEffect} from 'react';
 import {Link} from '@shopify/hydrogen/client';
 import {FocusTrap} from '@headlessui/react';
 
 import MobileCountrySelector from './MobileCountrySelector.client';
 import OpenIcon from './OpenIcon';
 
+let scrollPosition = 0;
+
 /**
  * A client component that defines the navigation for a mobile storefront
  */
 export default function MobileNavigation({collections, isOpen, setIsOpen}) {
   const OpenFocusTrap = isOpen ? FocusTrap : Fragment;
 
-  const [topScrollOffset, setTopScrollOffset] = useState(0);
-
   useEffect(() => {
     if (isOpen) {
-      setTopScrollOffset(window.scrollY);
+      scrollPosition = window.scrollY;
       document.body.style.position = 'fixed';
-    } else {
+    } else if (document.body.style.position) {
       document.body.style.position = '';
-      window.scrollTo(0, parseInt(topScrollOffset, 10));
+      window.scrollTo(0, scrollPosition);
     }
-  }, [isOpen, topScrollOffset]);
+  }, [isOpen]);
 
   return (
     <div className="lg:hidden">

packages/hydrogen/src/components/Link/Link.client.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react';
-import {useRouter} from '../Router';
+import {useRouter} from '../../foundation/Router/Router';
 import {createPath} from 'history';
 import {useNavigate} from '../../hooks/useNavigate';
 

packages/hydrogen/src/entry-client.tsx

@@ -10,8 +10,8 @@ import {hydrateRoot} from 'react-dom';
 import type {ClientHandler} from './types';
 import {ErrorBoundary} from 'react-error-boundary';
 import {useServerResponse} from './framework/Hydration/rsc';
-import {ServerStateProvider} from './client';
-import {Router} from './foundation/Router/Router.client';
+import {ServerStateProvider} from './foundation/ServerStateProvider';
+import {Router} from './foundation/Router/Router';
 
 const renderHydrogen: ClientHandler = async (ClientWrapper, config) => {
   const root = document.getElementById('root');

packages/hydrogen/src/foundation/Router/Router.client.tsx → packages/hydrogen/src/foundation/Router/Router.tsx

@@ -17,6 +17,8 @@ type RouterContextValue = {
 
 const RouterContext = createContext<RouterContextValue | {}>({});
 
+let currentPath = '';
+
 export const Router: FC<{history?: BrowserHistory}> = ({
   history: pHistory,
   children,
@@ -25,15 +27,17 @@ export const Router: FC<{history?: BrowserHistory}> = ({
   const [firstLoad, setFirstLoad] = useState(true);
   const [location, setLocation] = useState(history.location);
 
-  const {pending, setServerState} = useServerState();
+  const {pending, serverState, setServerState} = useServerState();
 
   useEffect(() => {
     // The app has just loaded
     if (firstLoad) setFirstLoad(false);
     // A navigation event has just happened
-    else if (!pending) {
+    else if (!pending && currentPath !== serverState.pathname) {
       window.scrollTo(0, 0);
     }
+
+    currentPath = serverState.pathname;
   }, [pending]);
 
   useEffect(() => {

packages/hydrogen/src/foundation/ServerStateProvider/index.ts

@@ -1,8 +1,2 @@
-export {
-  ServerStateProvider,
-  ServerStateContext,
-} from './ServerStateProvider.client';
-export type {
-  ServerState,
-  ServerStateContextValue,
-} from './ServerStateProvider.client';
+export {ServerStateProvider, ServerStateContext} from './ServerStateProvider';
+export type {ServerState, ServerStateContextValue} from './ServerStateProvider';

packages/hydrogen/src/hooks/useNavigate/useNavigate.ts

@@ -1,4 +1,4 @@
-import {useRouter} from '../../foundation/Router/Router.client';
+import {useRouter} from '../../foundation/Router/Router';
 
 type NavigationOptions = {
   /** Whether to update the state object or URL of the current history entry. Default to false */

packages/hydrogen/src/utilities/tests/shopifyMount.tsx

@@ -5,7 +5,7 @@ import {DEFAULT_LOCALE} from '../../foundation/constants';
 
 import {ShopifyConfig} from '../../types';
 import {ShopifyProvider} from '../../foundation/ShopifyProvider';
-import {Router} from '../../components/Router';
+import {Router} from '../../foundation/Router/Router';
 import {ServerState, ServerStateProvider} from '../../foundation';
 
 type SetServerState = React.Dispatch<React.SetStateAction<ServerState>>;