Loading markdown blog posts from a single JSON file

Question

I am using react-markdown (escaped) to load markdown from a JSON file.

I utilize a static site delivers on CloudFront to cut cost and remove the need of operations costs on servers.

Currently all posts get compiled into a posts.json file that get read by react-markdown in a react-based static site.

Beyond maybe chunking this to into multiple files to prevent a huge json file needing downloading, is there any kind of issue from this method?

Is this a bad idea?

EDIT; react-snap is being used to "prebuild" or whatever the term may be. I however am unsure if this is doing anything in regards the json that gets loaded on the page, for example if its getting output in build as plain HTML. Will have to confirm.

Answer 1

Your approach does take on some overhead and latency since there are several dependencies that must be satisfied before your content reaches the user.

• The browser must load and parse the script
• The script must fetch the JSON from the server
• react-markdown has to parse the markdown strings
• React has to render the components

None of these are likely to be particularly slow, but we can't do any of it concurrently, and it adds up.

But since your markdown is static and doesn't require re-rendering, you can get some efficiency from moving the render to the server, possibly even to the build step itself. If the markdown string is compiled to HTML via react-markdown at build time, then the client receives the markup that much more quickly.

Frameworks like Next.js do this by design - it allows you to specify async functions that fetch the data needed to render the page at build time. The data can of course be anything that is representable as React props, including JSON.

It may be neither your reponsibility nor your preference to change your project to use a new framework, but I hope the general ideas are useful on their own.