In this post we look at how to set up SvelteKit static site HTTP headers. SvelteKit, similarly to tools like Next JS, lets you generate static as well as Server Side Rendered (SSR) sites. SSR is not to be confused with a static site generator (SSG) which is a tool for generating static pages. Static just means that the page is built once for all visitors (rather than custom built for every visitor) and is typically the same for every user. An example is a typical blog or news site. A site like Twitter however needs to show different content based on who logged in — tweets from the people you follow, messages from your contacts and so on. Typically since the content it different for every user, a static build will not suit this case.
We will first take a look at the uses for custom static headers, then have a quick run through the differences between setting SvelteKit static site HTTP headers for static sites and SSR sites. Finally we will look at how you might go about adding custom HTTP headers to your static SvelteKit site. If that sounds appealing, let's read on!
HTTP headers are sent along with the body as part fo the server response when you visit a website. The body contains the content you see while the headers contain meta data. These are different to the HTML head section which is included in the response body. As an example cookies are often sent in HTTP header responses from servers. Another example are the dreaded CORS Access Control headers! On your static site you might want to set custom HTTP headers to instruct search engine crawlers or bots not to crawl your site. On top you can use then to boost your site's security.
Here's an example of an HTTP header instructing a bot not to index a page:
The HTTP headers are sent with a response from each page, and can be customised on a per-page basis. This would be useful if you had some pages you were happy for search engines to index while not wanting them to index others.
Just like there are SvelteKit adapters for building SSR sites to run on Cloudflare Workers,
Netlify, Node-based environments and Render, there is an adapter for building static sites. Note
you can use the same SvelteKit static adapter for all the hosts
mentioned above. There is not too much to configuring it. First download the
next version of the static the adapter into your project:
Then update you
svelte.config.js file to use the adapter:
Note you can also go for the half-in-half-out option, where you make only some pages static. In this case, you use the SSR adapter for your platform, then add this line to the load function in the Svelte file for any pages you want to static render:
With server side rendered sites, you can use the
to add any headers you want to the HTTP responses. As an example you can take a peek at the SvelteKit MDsveX Starter
Because your node server, Lambda Function or Cloudflare worker which provides server side content
sends the headers, you can update headers from the
hooks.js file. With
a static site, it is the Cloudflare, Netlify or Render servers which respond directly to HTTP requests.
That does not mean you cannot add custom headers though! Typically, you add a
_headers file to your build directory and you're away (with Render you update the headers in the Dashboard).
We'll look at this next.
In the previous section we saw you need to add a
_headers file to your
SvelteKit build directory. This will work with Cloudflare Pages and Netlify. By default, your build
directory will be
/build in the root directory of your project.
Probably the easiest way to create the
_headers file is to write a
short script that generates it and update your
build script to run that script. This way your host will generate the
file automatically when you run builds.
To do this first update your
Then create a script which adds the headers you want in a
generate-headers.js file in the root directory of your project:
This is just to give you an idea of what you might want to add. You might consider adding Content Security Policy headers or making the Permissions Policy headers less restrictive. If your aim is improving security, run a test on securityheaders.com or see the Mozilla Observatory as an alternative from this list of useful links:
- Content Security Policy Reference
- Observatory: Security Header site scanning from Mozilla
- Cloudflare Pages custom headers docs
Netlify docs on syntax for
If you are hosting your static site on Render, you can add headers in the Render dashboard .
In this post we saw:
- what HTTP headers are,
- how SSR sites differ from static sites,
- a way you might include custom SvelteKit static site HTTP headers in your project.
I do hope there is at least one thing in this article which you can use in your work or a side project. As always get in touch with feedback if I have missed a trick somewhere!
Have you found the post useful? Do you have your own methods for solving this problem? Let me know your solution. Would you like to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.