https://github.com/tdd/ssg-react-query-poc

An off-the-cuff demo of bare-bones custom SSG for React components using React-Query
https://github.com/tdd/ssg-react-query-poc

Last synced: 19 days ago
JSON representation

An off-the-cuff demo of bare-bones custom SSG for React components using React-Query

• Host: GitHub
• URL: https://github.com/tdd/ssg-react-query-poc
• Owner: tdd
• License: mit
• Created: 2023-12-22T14:12:51.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-01-10T11:00:28.000Z (10 months ago)
• Last Synced: 2024-10-07T02:40:50.960Z (about 1 month ago)
• Language: TypeScript
• Size: 57.6 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SSG POC

This provides an example for custom, bare-bones SSG of React pages that rely on React-Query for data fetching.

The app runs in the regular way (`npm run dev` based on Vite), but the `npm run ssg` custom npm script performs a custom SSG of per-character HTML files for every instance of the `` component.

It accomplishes that by prefetching relevant queries, using the appropriate query keys, in a unified query client used by the page wrapper that renders each page.

Because these are all public pages and every query has a unique URL and key, there is zero need to create individual query clients per page.

> ⚠️ Prefetching currently parallelizes **all** queries ahead of the rendering loop, but this might be unduly large for production use-cases and would likely require batch processing with subsequent clearing to avoid OOM issues (and also provide progression feedback).