docs: add data fetch documentation

README.md

@@ -13,6 +13,7 @@ See demo(also document): [docs](https://vite-react-ssg.netlify.app/)
 - [Extra route options](#extra-route-options)
   - [`entry`](#entry)
   - [`getStaticPaths`](#getstaticpaths)
+- [Data fetch](#data-fetch)
 - [lazy](#lazy)
 - [`<ClientOnly/>`](#clientonly)
 - [Document head](#document-head)
@@ -135,7 +136,8 @@ The RouteObject of vite-react-ssg is based on react-router, and vite-react-ssg r
 
 #### `entry`
 
-Used to obtain static resources.If you introduce static resources (such as css files) in that route and use lazy loading (such as React.lazy or route.lazy), you should set the entry field. It should be the path from root to the target file.
+Used to obtain static resources.If you introduce static resources (such as css files) in that route and use lazy loading (such as React.lazy or route.lazy), you should set the entry field.
+It should be the path from root to the target file.
 
 eg: `src/pages/page1.tsx`
 
@@ -187,6 +189,12 @@ const routes = [
 
 See [example](./examples/lazy-pages/src/App.tsx).
 
+## Data fetch
+
+You can use react-router-dom's `loader` to fetch data at build time and use `useLoaderData` to get the data in the component.
+
+See [example | with-loader](./examples/with-loader/src/pages/[docs].tsx).
+
 ## `<ClientOnly/>`
 
 If you need to render some component in browser only, you can wrap your component with `<ClientOnly>`.
@@ -539,7 +547,6 @@ export default defineConfig({
 - [x] SSR in dev environment
 - [x] More Client components, such as `<ClientOnly />`
 - [x] `getStaticPaths` for dynamic routes
-- [ ] Initial State
 
 ## Credits
 

docs/src/pages/docs/API.md

@@ -57,3 +57,32 @@ const routes = [
 ```
 
 See [example](https://github.com/Daydreamer-riri/vite-react-ssg/blob/main/examples/lazy-pages/src/App.tsx).
+
+## Data fetch
+
+You can use react-router-dom's `loader` to fetch data at build time and use `useLoaderData` to get the data in the component.
+
+```tsx
+import type { Params } from 'react-router-dom'
+import { useLoaderData } from 'react-router-dom'
+
+export function Component() {
+  const data = useLoaderData()
+
+  return (
+    <div>{/* your component */}</div>
+  )
+}
+
+export async function loader({ params }: { params: Params<string> }) {
+  const data = await fetch(`/api/${params.path}/data`)
+  return data
+}
+
+export function getStaticPaths() {
+  // ... get path
+  return path
+}
+```
+
+See [example](https://github.com/Daydreamer-riri/vite-react-ssg/blob/main/examples/with-loader/src/pages/[docs].tsx).