feat(seo): Add next/prev links in search page's infinite scroll.

[tlgimenes]

What's the purpose of this pull request?

Currently, our template for search page uses infinite scroll. This gives us a good UX, however may cause problems for machines. This template has a load more button element as shown in the picture below:

Since machines can't understand that this load more button loads more products, they end up by not crawling the full list of links on our store, creating many orphaned pages and thus decreasing or page's relevance.

A simple trick to make search engines to understand pagination is to replace this load more button by an anchor tag <a/> linking to the next page in the infinite scroll. Also, we need to add another anchor tag pointing to previous pages. A final result is something like:

Finally, we must be careful with canonicals. Pages in the pagination should be treated as different content and thus, must have different canonicals.

How it works?

To implement this feature I had to:

1. Add support to pagination to store-sdk
2. Add pagination info to search context in theme-store
3. Remove useSWRInfinite in favor of a more simple useSWR + Pages approach.

The coolest and more obscure thing about this PR is the third point. I had to support not starting the pagination from the first page, but being able to render a random page in the middle of the pagination and add a fetch previous button. As far as my research went, there is no simple way of doing this with useSWRInfinite. Reading SWR docs on pagination they document a way of using the useSWR hook such that you virtually render all pagination pages in a list, with any order you want. I implemented this and this actually made the code way simpler and easy to reason about. Also, prefetching was much simple. Also, this made the code a little bit faster since we don't need to import useSWRInfinite and webpack tree-shakes it away from the final bundle since swr package is side-effects free

How to test it?

Open any of the previews below and make sure that the show more button is rendered as an anchor tag <a/>. Also, make sure that when navigating to the next page we receive the links for the previous/next page.

https://github.com/vtex-sites/btglobal.store/pull/690
https://github.com/vtex-sites/storecomponents.store/pull/1016
https://github.com/vtex-sites/marinbrasil.store/pull/547

[netlify]

✔️ Deploy Preview for storeui ready!

🔨 Explore the source changes: 35f04fd

🔍 Inspect the deploy log: https://app.netlify.com/sites/storeui/deploys/60ecde8b42a2000008f2fe67

😎 Browse the preview: https://deploy-preview-811--storeui.netlify.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 35f04fd:

Sandbox	Source
Store UI Typescript	Configuration