Add <link rel="preconnect" href="https://happykit.dev" /> #7
Description
We can reduce the time happykit's first client-side request takes by pre-establishing the connection (preconnect) or at least the DNS resolution (dns-prefetch).
We can do this by having users add <link rel="dns-prefech" href="https://happykit.dev" /> or <link rel="preconnect" href="https://happykit.dev" /> to <head />.
But there is one downside, as not all pages will actually make a request to happykit:
Bear in mind that while is pretty cheap, it can still take up valuable CPU time, particularly on secure connections. This is especially bad if the connection isn't used within 10 seconds, as the browser closes it, wasting all of that early connection work. (source)
We could in theory optimise this further. When rendering, we know whether happykit is going to make a request the first time it renders. It will only skip the request if initial data from server-side rendering is passed in. It will make a request if no data is passed in, or if static initial data is passed in.
We could extend useFlags() to tell a <PreconnectContext /> whether to add <link rel="preconnect" href="https://happykit.dev" /> or not depending on the type of data being passed in. PreconnectContext would then add it to the <head />. This would give us control per page.
But it might be better to simply always have the No, <link rel="preconnect"> on the page. It's a tradeoff of wasted CPU cycles fro establishing the connection which might not get used and having a bigger bundle size and some CPU cycles for figuring out whether to preconnect or not.useFlags is too late. At that point the real request could happen already. It needs to be in the Head before js boots
The third alternative is to educate @happykit/flags users that they can add <link rel="preconnect"> to all pages using useFlags() where it will fetch on mount manually by doing the following:
import Head from 'next/head'
function IndexPage() {
return (
<React.Fragment>
<Head>
<link rel="preconnect" href="https://happykit.dev" />
</Head>
</React.Fragment>
)
}
export default IndexPageResources: