shopify-next.js-tailwind VS SWR

Checkout the example website and full tutorial at BuildNextShop.com where we create a fully production ready Shopify Headless store using Next.js!

Lastly, I know that I've omitted many great tools like XState, React Query, and SWR. These tools are utilities that are very scalable in their own right, but aren't full replacements for a good state manager.

It seems mostly expected to have a framework or library in place that takes care of data fetching for the root component, but simpler libraries also exist.

The new docs emphasize this, I guess mostly to make users think twice about building their own hook and to make it easy to move initial data fetching to the server.

Frameworks include next.js, remix or vite-plugin-ssr (the last one is maybe an outlier, as it deems itself a library).

Often fetching is tied to routing, which makes sense.

If routing is not needed, AFAIK the go-to solutions right now are react-query or SWR.

https://swr.vercel.app/

react-query has a nice comparison table for data fetching libraries:

https://tanstack.com/query/v4/docs/react/comparison

If routing only takes place on the client, react-router also includes data fetching features:

https://reactrouter.com/en/main/guides/data-libs

I don't know how well react-router fits with SSR.

If none of that fits and the requirements are either very simple or very custom, it should still be possible to manually pass props to the root component.

Looks good! Can you explain the benefits to alternatives, say SWR?

GitHub Discussions and Conversations: https://github.com/vercel/swr/discussions](https://github.com/vercel/swr/discussions)

For server cache management, React Query or SWR

With Next --> SWR (https://swr.vercel.app/)

SWR is like a simplified React Query

SWR (26k ⭐) -> A React Hooks library for data fetching, created by Next.js team, lightweight, and backend agnostic.

The main reason most people reach for them is to be a data store, if you're using GraphQL for a backend, Relay/Apollo wipeout the need for that. If you're using a REST backend, I'd look at something like SWR and continue to avoid any of the above state management libraries. If you need the ability to share fairly static data across your component hierarchy, plain old React Context is going to work great. If, and only if, you need to share a bunch of data that can refresh faster than say once per second, then reach for Jotai/Zustand or take a good look at Recoil. Before reaching for one of those libraries, I'd run the React profiler and actually profile where your re-render performance issues are to confirm that you can't make your DOM updates faster or apply more intelligent memoization to your props/state/context first. If and only if that doesn't work, then its time to reach for a new State Management approach. And only your highly dynamic data should be managed using it.

An even more advanced setup can use SWR to get stale-while-revalidate client side caching behavior with static pre-generated default data. Fast response with the ability to easily update any dynamic data from the client.