Custom component delayed rendering causes issue when building the static pages

[guillaume-ion]

Hi, I've created a question on Stack overflow and on discord with no success :(.

Here is my problem.

I have a custom component that loads data from a CSV file and render them as tables with mathjax styling in it.
(here is the component )

Since this process is asynchronous, the first time the component is rendered no data has yet been retrieved and thus the component renders

no data

.

Then a few milliseconds later the table renders and all is good under docusaurus start test environment.

However when doing docusaurus build the static page is generated with what seems to be the first render iteration of the component and shows 'no data'.

Am I missing a configuration option somewhere ? or something obvious? I'm far from being proficient in react.

Thank you

[slorber]

Docusaurus produce the static pages without waiting for any fetch to complete. No componentDidMount or useEffect are run during this process.

If you want to provide data fetched from an API, you have 2 choices:

• Render that data only on the client
• Ensure Docusaurus has the data when it renders on the server

If you want to ensure that Docusaurus has the data, you could just fetch that data ahead of time in a build step, like fetch a json file in website/data/myData.json, and import it with @site/data/myData.json.

We'll allow later to have an async config file, that would be able to fetch remote data and pass it to your site using config.customFields

You can also create a plugin for that, in which case you can fetch the data on loadContent.

But the simplest is really to fetch the data before build: yarn fetchData && yarn build

[guillaume-ion]

Thank you for your answer. I'll get on implementing this and will come back to this thread with how I made it work.
Thank you for your insights.

Is there somewhere on the current documentation where I could have found this information without bothering anyone?
Thanks

[slorber]

There's not much docs or discussion around that topic

Docusaurus is mostly built to serve docs from md files, not remote data.

But it is indeed possible to plug remote data. We have community work like a redoc plugin that shows a REST API (client-side rendering), a graphql plugin that generates md docs from a graphql schema, and an issue with possible CMS integration solutions.

[guillaume-ion]

Hey thanks, so i've created a script that convert csv to json before building and then in my react component I use require('myfile') to use them.
I also got rid of every async await and the useState and useEffect hooks.

The table generates without Mathjax formating for formulas, but i got around that by using Mathjax.typeset() method client side.

[guillaume-ion]

Update :

So it almost works, however, the mathjax typeset in only triggered when I press F5 to refresh the page, not when using the sidebar links.
How can I force the script to run ?