docusaurus-plugin-ssg-fetch

A Docusaurus plugin that allows you to fetch data while doing static site generation.

It basically functions as fetching data in Server Components in Next.js.

[!IMPORTANT] Currently, it has limitations, contributions welcomed:

• One fetch URL per page, could not set headers or use "POST" method, etc
• Only support fetch JSON data

Installation

npm install --save docusaurus-plugin-ssg-fetch

Configuration

| Name | Type | Default | Description | | ------------------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | configs | array | [] | An array of data fetching configurations. | | configs[].url | string | | The URL of the data to fetch. | | configs[].path | string | | The route path where the component will be accessed. | | configs[].component | string | | The name of the component associated with the data. | | configs[].propName | string | "data" | An optional property name to be used to pass the data to the component. |

[!IMPORTANT]
We generate routes for our components, so the components must NOT be in the path of other plugins that generate routes automatically (or you can exclude them):

• plugin-content-pages (which defaults to src/pages)
• plugin-content-docs (which defaults to docs)
• plugin-content-blog (which defaults to blog)

Example

// docusaurus.config.js
export default {
  plugins: [
    [
      "docusaurus-plugin-ssg-fetch",
      {
        configs: [
          {
            url: "https://api.example.com/friends.json",
            path: "/friends",
            component: "@site/src/fetch-data-pages/friends.tsx",
            propName: "friends", // Optional, default to "data"
          },
          {
            url: "https://api.example.com/events.json",
            path: "/events",
            component: "@site/src/fetch-data-pages/events.tsx",
          },
        ],
      },
    ],
  ],
};

// @site/src/fetch-data-pages/friends.tsx
export default function Friends({ friends }) {
  // propName named to "friends"
  return (
    <ul>
      {friends &&
        friends.length > 0 &&
        friends.map((friend) => <li key={friend.url}>{friend.name}</li>)}
    </ul>
  );
}

// @site/src/fetch-data-pages/events.tsx
export default function Events({ data }) {
  // propName defaults to "data"
  return (
    <ul>
      {data &&
        data.length > 0 &&
        data.map((event) => <li key={event.id}>{event.name}</li>)}
    </ul>
  );
}

License

MIT

References

• Data-Loading for Docusaurus Routes
• Dynamic Routes and Data Fetching