This is a demo of how to use vite-plugin-ssr with react-query.

This is a very simple example just to show the integration between the two libraries.

I used pnpm to install the dependencies, but you can use npm or yarn as well.

pnpm install

or

yarn install

or

npm install

Use the "dev" script from package.json, be sure to have the 3000 port available.

Use the "build" script from package.json, the build will be in the "dist" folder. By default this example is using prerendering, you can change this in the "vite.config.js" file.

Use the "server:prod" to run the server in production mode. or use the "prod" script to build and run the server.

The main idea is to use the "react-query" library to prefetch the data on the server side and then hydrate the client with the same data.

On the client we can reuse the same data to avoid fetching it again and then we are free to use the library to mutate or refetch the data as we want.

• React Query
• Prerendering by default (can be disabled in vite.config.js)
• Server Side Rendering is possible as well
• TypeScript
• Client routing provided by vite-plugin-ssr
• Client refetching example with react-query

Pull requests and issues are welcome 😊!