React-static: Support hot-reloading route data

[getDanArias]

I like the premise and benefits presented by react-static!

One area where I am struggling is that I'd like the browser to refresh when there are changes to the Markdown files. I've combined these two examples:

https://github.com/EmilTholin/react-static-markdown-example
https://github.com/pkrawc/react-static-markdown/blob/master/static.config.js

In the first example, you can make changes to the markdown test file, but they are not reflected on the browser until you refresh it.

I plan to store the post in markdown under a folder. Based on the first example, I changed the second example to reading the posts folder inside the /blog route path. When I make changes to it, there is no rebuilding, which is great, but I have to manually refresh the browser to see the updated content reflected after a markdown change.

I'd appreciate any insight or guidance on how to achieve this please. It's the only thing I am missing to fully embrace this framework for a blog!

Thank you for your time!

[rileylnapier]

I use a library npm-watch for this

my scripts:

{
  "watch": {
    "copyup": {
      "patterns": "src/*",
      "extensions": "json,md,png,html"
    }
  },
  "scripts": {
      "copyup": "copyup \"src/**/*.json\" \"src/**/*.md\" \"src/**/*.png\" \"src/**/*.html\"",
      "start": "npm-watch
  }
}

[tannerlinsley]

Expected Functionality

Changing a data source should hot-reload on the client with the updated data.

Current Functionality

If you are retrieving your data in

• The config.getRoutes, a server restart is required to see changes
• Each route.getData function, a browser reload is required to see changes

Proposed Changes to support this functionality

The problem you're experiencing is that this data is cached on the client, so when you move around your site, you are getting stale data. To make this possible a couple things would need to change in React Static:

• The user would need a way of detecting changes to the asset you're using (in this case, watching a markdown file for changes)
• RS would need to define a generic api to notify RS that an "asset" has changed and also be able to notify the client which routes have changed.
• On the client, the routeInfo cache for those changed routes would need to be cleared.
• Any components relying on the updated routeInfo would need to rerequest it, and naturally, render the component with the updated data.

Though the most common use case is probably Markdown files, these proposed changes should technically make it feasible to hot-reload when CMS data changes, as long as RS can be notified of that change.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity in 7 days. It will be closed if no further activity occurs. Thank you for your contributions.

[tannerlinsley]

HA! this is done. :)