search

geelen / react-snapshot

A zero-configuration static pre-renderer for React apps
MIT License
1.66k stars 105 forks source link

Routing between different snapshots #83

Open geelen opened 6 years ago

geelen commented 6 years ago

Let's imagine that you had a completely different layout on mobile vs non-mobile. How big should your browser window be when you take the snapshot?

The short answer is mobile, since if you have to do extra work on one of them you're more likely to have higher bandwidth & CPU on desktop.

But the long answer is potentially really interesting. What if instead of rendering:

/build/index.html
/build/about.html
/build/static/js/main.abcd1234.js

We instead rendered something like

/build/desktop/index.html
/build/desktop/about.html
/build/mobile/index.html
/build/mobile/about.html
/build/static/js/main.abcd1234.js

What about going even further? Detecting modern browsers with support for <script type="module" src="main.js"></script> and serving them a totally different bundle with all ES6 features native rather than transpiled, ala https://github.com/facebookincubator/create-react-app/issues/3125

/build/desktop.es5/index.html
/build/desktop.es5/about.html
/build/desktop.es6/index.html
/build/desktop.es6/about.html
/build/mobile.es5/index.html
/build/mobile.es5/about.html
/build/mobile.es6/index.html
/build/mobile.es6/about.html
/build/static/js/main.es5.abcd1234.js
/build/static/js/main.es6.efab5678.js

Then, all you'd need is a router that could match user-agent to the correct snapshot. But, a traditional router, running in NodeJS on a server somewhere, is kinda annoying. It's centralised, so you pay the cost of latency rather than being able to use a CDN. And if you're running a server, you may as well be doing real SSR.

HOWEVER, the idea of a user-agent-to-snapshot router could totally live on something like Lamda@Edge. The CDN would end up caching each snapshot, but it can make the decision which snapshot to access wholly locally. So you get the benefits of fully edge-cached static site, but still serve user-optimised content.

Anyway, just a thought.

stereobooster commented 6 years ago

How big should your browser window be when you take the snapshot?

I would consider breakpoints from popular CSS frameworks, like Bootstrap or Foundation.

As of idea of different snapshots - my current approach is "mobile first". The same way as we do default styles for mobile and everything else as media queries, I render snapshots for mobile resolution. But Idea sounds interesting. If you have router on edge - you can sniff userAgent and inject required polyfils, like https://polyfill.io/v2/docs/ does

geelen commented 6 years ago

Yeah exactly! You could actually just rewrite the response on its way back to the user for polyfills.

Screen dimensions aren't something you could necessarily know from a UA, but you could make an educated guess.