feat: Preload & deprioritize some fetches

src/components/footer/index.jsx

@@ -24,8 +24,13 @@ import style from './style.module.css';
  * Display a random contributor of the list above.
  */
 function useContributors() {
-	const contributors = useResource(() =>
-		fetch('/contributors.json').then(r => r.json()),
+	const contributors = useResource(
+		() =>
+			fetch('/contributors.json', {
+				credentials: 'include',
+				mode: 'no-cors',
+				priority: 'low'
+			}).then(r => r.json()),
 		['/contributors.json']
 	);
 

src/index.jsx

@@ -3,6 +3,7 @@ import * as hooks from 'preact/hooks';
 import { hydrate, prerender as ssr } from 'preact-iso';
 
 import App from './components/app';
+import { getContentPath } from './lib/use-content.js';
 import './analytics';
 import './style/index.css';
 
@@ -59,7 +60,18 @@ export async function prerender() {
 		{ type: 'meta', props: { property: 'og:url', content: `https://preactjs.com${location.pathname}` } },
 		{ type: 'meta', props: { property: 'og:title', content: globalThis.title } },
 		{ type: 'meta', props: { property: 'og:description', content: globalThis.description } },
+
+		// Make sure old v8 docs aren't indexed by search engines, leads to confused users if they land there
 		location.pathname.includes('/v8/') && { type: 'meta', props: { name: 'robots', content: 'noindex' } },
+
+		// Preloading
+		// These are all low priority, non-blocking fetches that we just want to have started early. None are critical due to prerendering.
+		{ type: 'link', props: { rel: 'preload', href: '/.netlify/functions/release?repo=preact', as: 'fetch', fetchpriority: 'low' } },
+		location.pathname == '/' && { type: 'link', props: { rel: 'preload', href: '/.netlify/functions/repos?org=preactjs', as: 'fetch', fetchpriority: 'low' } },
+		{ type: 'link', props: { rel: 'preload', href: '/contributors.json', as: 'fetch', fetchpriority: 'low' } },
+		// Hardcoding English is intentional, first render always fetches it with user preference only being applied later
+		{ type: 'link', props: { rel: 'preload', href: `/content/en${getContentPath(location.pathname)}.json`, as: 'fetch', fetchpriority: 'low' } },
+
 		process.env.BRANCH && { type: 'script', children: `ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga('set','dimension1','${process.env.BRANCH}');onerror=function(e,f,l,c){ga('send','event','exception',e,f+':'+l+':'+c)}` }
 	].filter(Boolean));
 

src/lib/content.js

@@ -10,7 +10,7 @@ export async function getContent([lang, name]) {
 		url = url.endsWith('/') ? url.replace(/\/$/, '.json') : url + '.json';
 
 	let fallback = false;
-	return await fetch(url)
+	return await fetch(url, { credentials: 'include', mode: 'no-cors' })
 		.then(r => {
 			// fall back to english
 			if (!r.ok && lang != 'en') {

src/lib/github.js

@@ -14,13 +14,21 @@ function checkStatus(r) {
 const baseUrl = '/.netlify/functions/';
 
 export const fetchOrganizationRepos = org =>
-	fetch(`${baseUrl}repos?org=${org}`, { credentials: 'omit' })
+	fetch(`${baseUrl}repos?org=${org}`, {
+		credentials: 'include',
+		mode: 'no-cors',
+		priority: 'low'
+	})
 		.then(checkStatus)
 		.then(r => r.json())
 		.catch(() => getFallbackData().preactOrgRepos);
 
 export const fetchRelease = repo =>
-	fetch(`${baseUrl}release?repo=${repo}`, { credentials: 'omit' })
+	fetch(`${baseUrl}release?repo=${repo}`, {
+		credentials: 'include',
+		mode: 'no-cors',
+		priority: 'low'
+	})
 		.then(checkStatus)
 		.then(r => r.json())
 		.catch(() => {

src/lib/use-content.js

@@ -17,7 +17,7 @@ import {
  * @param {string} path
  * @returns {string}
  */
-function getContentPath(path) {
+export function getContentPath(path) {
 	if (path == '/') return '/index';
 	if (path == '/tutorial') return '/tutorial/index';
 	return path;