Opens an external site in a new window
Pray for peace.
RODNEY LAB
  • Home
  • Plus +
  • Projects
  • Giving
  • Contact

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

SvelteKit SSG: how to Prerender your SvelteKit Site
  1. Rodney Lab Home
  2. Rodney Lab Blog Posts
  3. SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

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

Updated 6 days ago
4 minute read Gunning Fog Index: 6.3 2 comments
Content by Rodney
Author Image: Rodney from Rodney Lab
SHARE:

šŸ”„ 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Ā #

Browser not supported 😢
SvelteKit Static Site Generation (SSG)

šŸ—³ PollĀ #

What tooling will you use for your next SSG site?
Voting reveals latest results.

šŸ–„Ā CodeĀ #

SvelteKit Config for Entirely SSGĀ SiteĀ #

Install the static adapter:

    
pnpm add -D @sveltejs/[email protected]

then update config:

svelte.config.js
javascript
    
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 .

@askRodney avatar

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.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

Rodney from Rodney Lab
TAGS:
SVELTEKIT
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Comments

  • Tony

    Using SvelteKit and Flatbread (https://github.com/tonyketcham/flatbread) on an SSG site right now 😁

    2 months ago
    • Rodney verified

      Hey Tony, I like the idea. What is the ideal use case? Is it overkill for a basic blog site?
      2 weeks ago

Ask for more

1 Aug 2022 — Svelte Video Blog: Vlog with Mux from your own SvelteKitĀ Site
15 Jun 2022 — Starting out Svelte and SvelteKit: Beginners’ Tutorial

Copyright Ā© 2020–2022 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Plus +
  • Contact
  • Terms of Use
  • Privacy Policy
We use cookies Ā to enhance visitors’ experience. Please click the ā€œOptionsā€ button to make your choice.  Learn more here.