search

popcodeorg / popcode

An HTML/CSS/JavaScript editor for use in the classroom
MIT License
189 stars 139 forks source link

Serve full HTML contents on initial pageload #1195

Open outoftime opened 6 years ago

outoftime commented 6 years ago

Right now Popcode renders completely client-side—the HTML response is basically just an empty document save for a stylesheet link and an empty div for React to render into. In principle, seems like there is no reason we shouldn’t be able to “server render” the initial state of the page into a static HTML file at compile time.

ajgreenb commented 6 years ago

Is this possible with Popcode hosted on S3? Don't we need a Node.js process to do server-side rendering with React?

outoftime commented 6 years ago

@ajgreenb or do we?

The proposal here is to pre-render a fully-cooked React-ready HTML page during deployment. Seems like it should in principle be possible!

ajgreenb commented 6 years ago

Ahhhhhhhhhhhhhhhhhhh

outoftime commented 6 years ago

Turns out there are several reasonably popular packages to do this:

All of the above seem to be implemented by loading the page in a headless browser, waiting for some amount of time, then taking a snapshot of the DOM. Not super satisfying but probably the only way to do it without explicit consideration at the level of application state management.

I do wonder if this would actually be a good experience, though—it seems like the outcome would likely be that the page loads and appears fully interactive but nothing actually works until the JS bundle loads. That is probably worse than just showing a loading animation for a few seconds, as we do now.