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.

Answer 2

I think server-side rendering will help in your case as most of the resources need to be compiled on the client machine. you can also use a chrome puppeteer that is headless chrome that can be used to transpile resources on the server and then send it client to reduce the latency. Refer https://developers.google.com/web/tools/puppeteer

Answer 3

It looks like you have everything you need to use a static site generator like Gatsby . A static site generator will allow you to keep your big JSON file which will only be read on build time. A static site generator like GatsBy will help you generate stand alone static HTML documents for each of your blog post.

You also can host your static site for free on any the popular CDNs free tiers like Nelify and Surge