Skip to content

Render Header and Footer statically instead of as server islands #747

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jamiefolsom wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Render Header and Footer statically instead of as server islands #747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0fa676f
Render Header and Footer statically instead of as server islands (#745)
jamiefolsom Jul 13, 2026
6242fbd
Rebuild deploy preview (staging cache env vars added)
jamiefolsom Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions src/layouts/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import config from '@config';
import NavBar from '@layouts/NavBar.astro';
import { getCustomNavbar, getDefaultNavbar, getPages } from '@utils/nav';
import { toBackgroundClass } from '@utils/pageBuilder';
import { getCurrentURL, setCacheControl } from '@utils/url';
import clsx from 'clsx';
import _ from 'underscore';

Expand All @@ -18,6 +17,7 @@ const {
customContent,
login,
logos,
pathname,
privacyUrl,
termsUrl,
title
Expand All @@ -26,7 +26,6 @@ const {
const year = new Date().getFullYear();

const currentLocale = Astro.currentLocale;
const currentUrl = getCurrentURL(Astro.request.headers);

const [{ t }, navbar, pages] = await Promise.all([
getTranslations(currentLocale),
Expand All @@ -37,13 +36,11 @@ const [{ t }, navbar, pages] = await Promise.all([
let items;

if (navbar && navbar.items) {
items = getCustomNavbar(navbar, currentLocale, currentUrl.pathname);
items = getCustomNavbar(navbar, currentLocale, pathname);
} else {
items = getDefaultNavbar(pages, currentLocale, currentUrl.pathname, t);
items = getDefaultNavbar(pages, currentLocale, pathname, t);
}

setCacheControl(Astro.response.headers);

---

{ !custom && (
Expand Down
13 changes: 5 additions & 8 deletions src/layouts/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,17 @@ import LanguagePicker from '@components/LanguagePicker';
import MobileHeader from '@components/MobileHeader';
import NavBar from '@layouts/NavBar.astro';
import { getCustomNavbar, getDefaultNavbar, getPages } from '@utils/nav';
import { getCurrentURL, setCacheControl } from '@utils/url';
import { getRelativeLocaleUrl, getRelativeLocaleUrlList } from 'astro:i18n';
import clsx from 'clsx';

const locales = getRelativeLocaleUrlList();
const currentLocale = Astro.currentLocale;
const currentUrl = getCurrentURL(Astro.request.headers);

const {
fullscreen,
image,
imageAlt,
pathname,
title,
transparent
} = Astro.props;
Expand All @@ -30,13 +29,11 @@ const [{ t }, navbar, pages] = await Promise.all([
let items;

if (navbar && navbar.items) {
items = getCustomNavbar(navbar, currentLocale, currentUrl.pathname);
items = getCustomNavbar(navbar, currentLocale, pathname);
} else {
items = getDefaultNavbar(pages, currentLocale, currentUrl.pathname, t);
items = getDefaultNavbar(pages, currentLocale, pathname, t);
}

setCacheControl(Astro.response.headers);

---

<div
Expand Down Expand Up @@ -71,7 +68,7 @@ setCacheControl(Astro.response.headers);
<LanguagePicker
locales={locales}
currentLocale={currentLocale}
currentUrl={currentUrl.pathname}
currentUrl={pathname}
client:only='react'
/>
</NavBar>
Expand All @@ -87,6 +84,6 @@ setCacheControl(Astro.response.headers);
<LanguagePicker
locales={locales}
currentLocale={currentLocale}
currentUrl={currentUrl.pathname}
currentUrl={pathname}
/>
</MobileHeader>
4 changes: 2 additions & 2 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,9 @@ const {
fullscreen={fullscreen}
image={header?.logo}
imageAlt={branding.title}
pathname={Astro.url.pathname}
title={header?.hide_title ? undefined : branding.title}
transparent={transparent}
server:defer
/>
</HeaderContainer>
<NotificationPanel
Expand All @@ -135,10 +135,10 @@ const {
customContent={footer?.custom_content}
login={footer?.allow_login && !STATIC_BUILD}
logos={footer?.logos}
pathname={Astro.url.pathname}
privacyUrl={footer?.privacy_url}
termsUrl={footer?.terms_url}
title={branding?.title}
server:defer
/>
)}
</body>
Expand Down
12 changes: 0 additions & 12 deletions src/utils/url.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ interface SearchParams {
[key: string]: string;
}

const HEADER_REFERER = 'Referer';

/**
* Returns the fully formed URL and search parameters for the passed arguments.
*
Expand All @@ -33,16 +31,6 @@ export const convertToNumber = (str) => {
return str;
};

/**
* Returns the referer URL on the passed headers.
*
* @param headers
*/
export const getCurrentURL = (headers: Headers): URL => {
const referer = headers.get(HEADER_REFERER);
return new URL(referer);
};

/**
* Parses the search parameters from the passed URL string and returns it as an object.
*
Expand Down