vite-react-ssg

You can use React Router's loader function to fetch data at build time. This allows you to perform server-side tasks (like reading files with node:fs) that should not be sent to the client.

Behavior:

• Production: The loader runs only at build time. Data is fetched via a manifest generated during the build during subsequent browser navigations.
• Development: The loader runs on the server. It provides data to the HTML during initial SSR and makes server-side fetch calls during client-side route navigations.

Usage:

1. Define an async function loader() in your page file.
2. Use the useLoaderData hook inside your component to access the returned data.

import { useLoaderData } from 'react-router-dom'

export default function Docs() {
  const data = useLoaderData() as Awaited<ReturnType<typeof loader>>

  return (
    <>
      <div>{data.key}</div>
      <div dangerouslySetInnerHTML={{ __html: data.packageCodeHtml }} style={{ textAlign: 'start' }}></div>
    </>
  )
}

export const Component = Docs

export const entry = 'src/pages/json.tsx'

export async function loader() {
  // The code here will not be executed on the client side
  const fs = (await import('node:fs'))
  const cwd = process.cwd()
  const json = (await import('../docs/test.json')).default

  const packageJson = await fs.promises.readFile(`${cwd}/package.json`, 'utf-8')
  const { codeToHtml } = await import('shiki')
  const packageJsonHtml = await codeToHtml(packageJson, { lang: 'json', theme: 'vitesse-light' })

  return {
    ...json,
    packageCodeHtml: packageJsonHtml,
  }
}

Do not use redirects inside a loader, as loaders only execute during the build process for data fetching. To perform a redirect, use a component with useNavigate from react-router-dom inside a useEffect hook.

import { useNavigate } from 'react-router-dom'
import { useEffect } from 'react'

// Inside your routes definition
{
  path: '/',
  Component: () => {
    const navigate = useNavigate()
    useEffect(() => {
      navigate('/en', { replace: true })
    }, [navigate])
    return null
  },
}

export const routes: RouteRecord[] = [
  {
    path: '/:lng',
    Component: Layout,
    getStaticPaths: () => Object.keys(resources),
    children: [
      // ... some routes
    ],
  },
  {
    path: '/',
    Component: () => {
      const navigate = useNavigate()
      useEffect(() => {
        navigate('/en', { replace: true })
      }, [navigate])

      return null
    },
  },
]

You can use react-router-dom's loader to fetch data during the build process. In production, the loader runs only at build time, and data is served via a generated manifest. In development, the loader runs on the server.

Important: To prevent server-only modules (like node:fs or shiki) from being sent to the client, wrap the logic in an if (!import.meta.ssr) check.

import { useLoaderData } from 'react-router-dom'

export default function Docs() {
  const data = useLoaderData() as Awaited<ReturnType<typeof loader>>
  return <div>{data.key}</div>
}

export const loader = async () => {
  if (!import.meta.ssr) return null
  
  const fs = await import('node:fs')
  // ... perform server-side logic
  return { key: 'some-data' }
}

import { useLoaderData } from 'react-router-dom'

export default function Docs() {
  const data = useLoaderData() as Awaited<ReturnType<typeof loader>>

  return (
    <>
      <div>{data.key}</div>
      <div dangerouslySetInnerHTML={{ __html: data.packageCodeHtml }} style={{ textAlign: 'start' }}></div>
    </>
  )
}

export const Component = Docs

export const entry = 'src/pages/json.tsx'

export async function loader() {
  if (!import.meta.ssr) {
    return null
  }
  const fs = (await import('node:fs'))
  const cwd = process.cwd()
  const json = (await import('../docs/test.json')).default

  const packageJson = await fs.promises.readFile(`${cwd}/package.json`, 'utf-8')
  const { codeToHtml } = await import('shiki')
  const packageJsonHtml = await codeToHtml(packageJson, { lang: 'json', theme: 'vitesse-light' })

  return {
    ...json,
    packageCodeHtml: packageJsonHtml,
  }
}

You can combine vite-react-ssg route options with React Router's lazy field. When using lazy, vite-react-ssg automatically detects files dynamically imported within the lazy function to help gather static resources (like style files) during the build, which helps prevent Flash of Unstyled Content (FOUC).

If your component fails to load, ensure it or its parent is wrapped in a React <Suspense> component.

Pattern for lazy routes:

1. Define the component and getStaticPaths/entry in the page file.
2. Import the page file using lazy in your routes configuration.

// src/pages/[page].tsx
export function Component() {
  return (
    <div>{/* your component */}</div>
  )
}

export function getStaticPaths() {
  return ['page1', 'page2']
}

export const entry = 'src/pages/[page].tsx'

// src/routes.ts
const routes = [
  {
    path: '/:page',
    lazy: () => import('./pages/[page]')
  }
]