Meta components #729
Description
Just saw this on Twitter
Basically shows how much code is needed to make something as simple as an image work well on a huge variety of devices.
And for more context, you can read a conversation in the styled jsx repo as far as internationalization: vercel/styled-jsx#74
Or you could imagine a certain component within your system having different capabilities based on the authenticated state of the user. Imagine a /dashboard component whose code is different based on the role.
The bottom line is: don't ship more code than is necessary. That means cutting down on the number of logical branches in the components code. For example, by doing ahead-of-time compilation.
If the user is on iOS, give them a certain <img> tag, and if the user is on web, a different one. The render code should, in those cases, completely exclude the possibility that you'll switch from iOS to Web (because it's impossible), so the code should not even reach the user.
With our new programmatic API, you can solve the problem at the page level. A certain route /dashboard can resolve to different components by examining the req object.
But how do we solve it for nested components? Imagine that you use an <Image/> component that you import, that you also want to compile ahead of time according to the characteristics of the request.
Perhaps the solution is #728: dynamic imports, in combination with getInitialProps:
import parse from 'parse-user-agent'
import React from 'react'
export default class extends React.Component {
static getInitialProps ({ req }) {
const isIOS = parse(req ? req.headers['User-Agent'] : navigator.userAgent).ios
if (isIOS) {
Image = import('./image-ios')
} else {
Image = import('./image-web')
}
return { Image: await Image }
}
render () {
const { Image } = this.props
return <div><Image src="doge.png" alt="wow" /></div>
}
}Anyway, would like to hear your thoughts!