Build and SSR react on the fly

Here's a story -> 🤠

You have a blog website like dev.to and you want users to write articles when they log in. They write their article in the form of markdown and then publish it. The published article goes to an s3-bucket which triggers an s3 create Object event. The event launches a lambda function(Serverless).

Now, the lambda function has to convert that markdown into a static HTML using react, by fetching and parsing the markdown into the components as props. Then the static HTML is passed to another s3-bucket which acts as a static web server.

Why this approach?

Its cheaper, faster and more scalable than running your own web-server. (ec2)

Methods already tried !!!!!

1. NextJs:- It's good, it's great but not for this use case.
   Possible approaches:-

   1. Spinning up a custom express server -> Caveats : Its least documented and doesn't work 99% of the time. See
   2. Using get ServerSideProps -> Caveats : It doesn't work 99% of the time. See

2. Gatsby:- Best static builder, does everything, has plugin support and node APIs so I can fetch the s3 object easily.

   1. The ONLY ISSUE: It DoEsN'T allow us to change the ExPoRt directory.😵😡 See while lambda limits us to write to one and only /temp directory.

Methods which work (Sort offfff) !!!!!!

The Great Gatsby !!

1. Exporting Gatsby using plugins and node APIs and then using this approach to render it. Looks good and works, but it clashes with babel and webpack. Gatsby/Router doesn't work at all.

FireJSX to the rescue

FireJSX is a zero config, highly customizable, progressive react static site generator with blazingly fast SSR. Built for fast on the fly builds and SSR.

Comments

[Aniket Prajapati]

Both Gatsby and NextJS have fixed all the issues mentioned above.