SvelteKit SSG: how to Prerender your SvelteKit Site # SvelteKit SSG: how to Prerender your SvelteKit Site #

🔥 SvelteKit Static Site Generation #

In this video on SvelteKit SSG we take a look at when you might choose static site generation (SSG). We also look at why you would consider server side rendering (SSR) as an alternative. As well as an example use case of each, we also see how to set up SSG in your SvelteKit app. Finally, we see how you can mix SSR and SSG in the same Svelte app with SvelteKit.

If that’s what you wanted to know then hit play on the video! After that, don’t forget to scroll down. You will see code blocks with the config mentioned in the video. Drop a comment below or equally, reach out for a chat on Element  as well as Twitter @mention  if you have suggestions for improvements or questions.

📹 SvelteKit SSG: Video #

🖥 Code #

SvelteKit Config for Entirely SSG Site #

Install the static adapter:

    
pnpm add -D @sveltejs/[email protected]

  

then update config:

    
1 /** @type {import('@sveltejs/kit').Config} */
2 import adapter from '@sveltejs/adapter-static';
3 import { mdsvex } from 'mdsvex';
4 import preprocess from 'svelte-preprocess';
5 
6 const config = {
7   extensions: ['.svelte', '.md', '.svelte.md'],
8   preprocess: [
9     mdsvex({ extensions: ['.svelte.md', '.md', '.svx'] }),
10     preprocess({
11       scss: {
12         prependData: "@import 'src/lib/styles/variables.scss';",
13       },
14     }),
15   ],
16   kit: {
17     adapter: adapter({ precompress: true }),
18     prerender: { default: true },
19   },
20 };
21 
22 export default config;

  

SvelteKit Config for Some Prerendered Pages #

1. Switch out the static adapter for another.
2. Remove the prerender: { default: true }, line used above
3. Then add this snippet to pages you want to prerender:

    
<script context="module">
  export const prerender = true;
</script>

  

🔗 Links #

• Starting out Svelte and SvelteKit tutorial  ,
• read about Cloudflare docs switching static site generator  ,
• SvelteKit adapter docs 
• Twitter handle: @askRodney  .
• Element chat: #Rodney matrix chat  .

🏁 SvelteKit SSG: Summary #

How do you make a completely static SvelteKit site? #

With SvelteKit you can opt for a completely static site. For most deployment flexibility, in this case, choose the static adapter: `pnpm add -D @sveltejs/[email protected]`. Then in your SvelteKit config file (`svelte.config.js`), set `kit.prerender.default` to `true` and also make sure your config uses the static adapter. You can specify an option config to the adapter: `{precompress: true}` to generate brotli and gzip assets.

Can you mix SSG and SSR with SvelteKit? #

You might want to create a mostly SSR SvelteKit webapp but still have a few pages statically generated. This is possible with SvelteKit. Choose an adapter for the platform you plan to host you site on. Choose the auto adapter if you are not yet sure, it is easy to change out adapters later. Next add the adapter as a dependency in your project (e.g. `pnpm add -D @sveltejs/adapter-auto`). Now on any pages which you want to be rendered statically, add a `<script context="module">` tag. Inside just add the configuration line `export const prerender = true;`. This is all you need for SvelteKit to prerender that page.

What advantages does SSG offer over SSR? #

Different developers have different preferences. As a general rule though, where different users see different content a server side rendered (SSR) model is a better choice. Here we are talking about sites where the user logs in and sees different content. Static site generation works in many other use cases. Typically static sites are lightning fast. Since every user sees the same content, hosts can has this content and even push it to CDN edge nodes which are closer to the site visitor. Static sites can also be more secure, provide better user experience and also perform favourably in terms of SEO. However, with the wrong generator, build times can be slow and even adding a single comma might mean a time-consuming rebuild. This can slow down the development cycle, and impact issue debugging. For that reason a modern SSG tool like SvelteKit or Astro is often a better choice.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee .

Rodney

@askRodney

Just dropped a little video where we talk about the relative merits of the SSR and SSG models.

We also see how you can set up ❤️ SvelteKit for a completely static site or mix with some server side rendering if needed.

Hope you find it useful!

https://t.co/7HQytJzDmb

— Rodney (@askRodney) June 28, 2022

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 as well as via the #rodney Element Matrix chat  . Also, see further ways to get in touch with Rodney Lab . I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.