Server side rendering? (Or a way around it?)

I’m working on a blog type site where users can create and edit their own pages/articles. I can serve dynamic user generated content as HTML from text from a canister, but when it comes to photos, videos, etc, server side rendering is really handy, because I could just serve a dynamic asset directly from a nodejs server from a sub-url endpoint, where it would get the data from a database.
The approach I’m thinking of taking is:
When a user uploads their HTML page, I want to take is to embed javascript in the static html wherever a photo or video is embedded, so that those spots will call a client side function which calls getchunk canister calls which will deliver the content chunk by chunk from a canister, and then convert those raw data chunks into photos, videos, files or whatever else.
Is this an overly complicated approach?
Any ideas are appreciated!

2 Likes

Update:

I found a project: GitHub - gabrielnic/motoko-cdn: Motoko cdn/storage solution. ie: mini big-map made by @Gabriel
I’m thinking I will leverage the blob downloading functionality. Embedding some sort of trigger to a local blob downloader which streams the chunks, which returns a promise to the blob’s local URL and outputting a picture of a video etc. I’m still learning so I apologize if my terminology of these things are made up. :slight_smile:

Example format of a URL
ic:///<key_ID>/?format=&size=<size_in_bytes>

The injected HTML from the article load will initially contain tags something like (but not exactly like, this is made up)
<img src="ic-storage://b213f-f2aaa-aaaae-aaaxa-cai.ic0.app/ldezx-tht2g/1573195/test_img.jpeg?format=img/jpeg&size=12051">
And the client will retrieve the appropriate data, then replace that tag with:
<img src="blob:https://b213f-f2aaa-aaaae-aaaxa-cai.ic0.app/d4485d18-fd2c-4030-9062-f0ca4f508b88">
In between that, we could temporarily replace the src with a loading icon, while waiting

2 Likes