CODEWITHSUNDEEP
vitesveltesveltekit
Muhammed Rahif
Muhammed Rahif

Reputation: 668

Difference between Svelte and SvelteKit static adapter?

I have two projects here:

  1. Created using npm create vite app-with-svelte -- -t svelte-ts
  2. Created using npm create svelte app-with-sveltekit (Skeleton project)

Then, I use the static adapter with it, following this doc. Eventually, svelte.config.js:

 import adapter from "@sveltejs/adapter-static";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

 const config = {
     preprocess: vitePreprocess(),
     kit: {
         adapter: adapter({
         pages: "build",
         assets: "build",
         fallback: undefined,
         precompress: false,
         strict: true,
         }),
     },
 };

 export default config;

src/routes/+layout.ts:

export const prerender = true;

Both projects are aimed to host as static files. Is any one of these better than the other?

I created a project using SvelteKit static adapter with Neutralino. From the middle of the way, I got stuck with Compatibility with SvelteKit (Neutralino issue), forcing me to use Svelte. So I searched for migrating SvelteKit to Svelte, found a reddit tweet:

There's no need to migrate away from kit. Look up @sveltejs/adapter-static. It should solve your issue

After npm run build, are Svelte and SvelteKit static adapter the same? If so, which one should I use?

Upvotes: 0

Views: 381

Answers (2)

Peppe L-G
Peppe L-G

Reputation: 8345

If you just use Svelte in Vite, then you create a pure Single-Page Application where the app consists of HTML, CSS and JS, all running in your users web browser. That is, your users must have client-side JS enabled in their web browser for them to be able to see anything at all. This is not optimal. Further more, the first page the user views will be loaded slowly (much client-side JS code need to run...), and search engines will not like your website much.

If you use SvelteKit instead, then you can use various adapters to implement an app with much more power, such as taking advantage of pre-rendering, server-side rendering, server-side code (i.e. having a backend), etc.

The simplest type of adapter in SvelteKit is adapter-static. Using that one, you basically build a Single-Page Application, but at build time SvelteKit will pre-render all your pages and make them available as static HTML files (these are independent of Svelte and client-side JS), so your website will work for users that don't have client-side JS enabled, the first page will be loaded very fast, and search engines will love your website. The users that do have client-side JS enabled will also take advantage of hydration, which is SvelteKit turning your app into a pure Single-Page Application for these users, so these users can enjoy the benefits of a Single-Page Application.

Upvotes: 0

José Ramírez
José Ramírez

Reputation: 2360

They are not the same. The most important thing to note is that Sveltekit can route pages, while the Vite + Svelte project has no routing capabilities because Svelte has no built-in router.

Upvotes: 1

Related Questions