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

📹 SvelteKit SSG: Video #

🖥 Code #

SvelteKit Config for Entirely SSG Site #

Install the static adapter:

    
pnpm add -D @sveltejs/adapter-static@next

  

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/adapter-static@next`. 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 web app, but still have a few pages statically generated. This is possible with SvelteKit. Choose an adapter for the platform you plan to host your site on. Pick 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, hosting services can have this content ready 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 Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.