При создании большого SPA одним из важных пунктов оптимизации становится предварительная загрузка данных. Например, предварительная загрузка пользовательских данных, конфига и т.д. поможет быстрее отобразить страницу.
В SPA приложениях React чаще всего загрузка данных происходит после монтирования приложения. Этот подход может стать неэффективным по мере масштабирования приложения.
В своей статье автор поделился скриптом для предварительной загрузки данных. Этот скрипт вставляется в тег <head> и исполняется одним из первых. Базовая реализация:
<head>
<script>
// Упрощенная версия, чтобы показать как высокоуровнево работает загрузка
window.__userDataPromise = (async function () {
const user = await (await fetch("/api/user")).json();
const userPreferences = await (await fetch(`/api/user-preferences/${user.id}`)).json();
return { user, userPreferences };
})();
</script>
</head>
function MyApp() {
const [userData, setUserData] = useState();
async function loadUserData() {
setUserData(await window.__userDataPromise);
}
useEffect(() => {
loadUserData();
}, []);
}
В своем блоге автор поделился более низкоуровневой реализацией скрипта.
https://mmazzarolo.com/blog/2024-07-29-data-preloading-script/
