Comments (2)
I found the issue, this useMemo here does not have globalThis?.window?.__hydrogenHydrated
as a dependency so this is memo-izing and only returning the first page.
I have a hunch that in the examples or other code bases, there are other calls into usePagination
that are triggering the useEffect
that is setting the global __hydrogenHydrated
singleton to true and not running into this issue. This seems to be an issue when there is only one instance of Pagination
on the page.
For anyone else running into this issue, I forked the Pagination
component and got rid of all instances of __hydrogenHydrated
being used and this fixed the issue for me.
This works but it does cause the SSR page to flicker for an instance before the client side hydration kicks in with the previous pages. This also doesn't work if sharing the deep linked URL to a different browser.
I then got both issues by
- Redirecting to the same page without the URL params if there are not previous pages in the navigation state
- Rendering
null
during SSR if there were pagination params present
const navigate = useNavigate();
const {search, state} = useLocation();
const params = useMemo(() => new URLSearchParams(search), [search]);
useEffect(() => {
if (params.get('direction') && params.get('cursor') && !state?.nodes) {
navigate(window.location.pathname);
}
}, [params, state, navigate]);
if (
typeof document === 'undefined' &&
params.get('direction') &&
params.get('cursor')
) {
return null;
}
The downside to this being that SSR is turned off if the user paginates past the first page.
However, this seemed like the best tradeoff by allowing SSR on first page load but turning it off if the user paginates past the first page and refreshes the page. This also fixes the issue of when a deep linked URL is shared with someone or opened in an incognito window.
With these pros and cons and work arounds, could you advise on how to best to fix this? I'd also be happy to open a PR if I'm provided some guidance, thank you!
from hydrogen.
@kanehara This is expected behaviour of the pagination component to remain at page 2 when a full page refresh happens on page 2.
This is done in consideration of both SEO and user experience.
SEO - Each page of the pagination should be navigable with real urls. If you look at our hydrogen.shop, each page of the pagination has a cursor hash when allows it to be reachable with real urls. We have buttons to also navigate to previous pages. You can use the infinite loading example to load previous page as well.
User experience - We have gone with the approach to let users to stay on the paginated page they are on, if they accidentally hit full page refresh or simply due to tab going to background and browser decides to make a refresh, they would stay on that page. This is with considerations of bad user experience of user scrolling 10+ pages down the list and a refresh made them start all over again.
A potential path you can take is to store the previous loaded product pages in a localStorage
. On hydration, using startTransition
(to avoid hydration mismatch), check localStorage
for previous store products and join with products loaded from SSR. The goal is that we don't mess with the SSR side with the ability to render on a per page bias but be able to have a full list of products on the client side. For buyers who has previous loaded the previous page, they will get immediate feedback on the products that's already loaded. For buyers who has not load previous pages, they will get delayed feedback on each previous page navigation.
from hydrogen.
Related Issues (20)
- Vite and MiniOxygen errors when using `vanilla-extract` and `formik`
- Vite Shopify Hydrogen Deploy Hardcodes the Removal of Client Source Maps HOT 1
- `page_viewed` Analytics events not firing when expected HOT 2
- Query injection possible in `urlRedirects` handler
- CUSTOMER ACCOUNT API Integration authorize always leads to 401 HOT 10
- QraphQL response from useLoaderData is always undefined on first render HOT 2
- CA API token not valid for cart buyerIdentity update HOT 1
- Build fails when overriding Vite `build.rollupOptions.output.entryFileNames` with templated string HOT 1
- Build fails when customizing SSR entrypoint due to hardcoded deletion of SSR build `assets/` (chunks) directory HOT 1
- Unexpected Server Error: atob() called with invalid base64-encoded data. in authorize->getNonce->decodeJwt HOT 6
- CSP nonce grows when using const passed from another file
- `Money` component and `useMoney` hook donβt respect app language format
- [Bug]: Hydrogen CLI Deploy Deployment Tokens Not Supported HOT 4
- Error when using html-react-parser HOT 8
- Hydrogen / Windows 11 "The specified module could not be found" HOT 4
- Cart Id / Cookie is not reset on checkout completed HOT 5
- TypeError: Inter-TransformStream ReadableStream.pipeTo() is not implemented HOT 5
- `<Image />` component throws `TypeError` with imported local assets during development HOT 7
- Error: "Cannot redefine property: Shopify" when run Hydrogen on local HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hydrogen.