SvelteKit without SSR / SSG? #3365
-
Describe the problemThere are several great things about SvelteKit; the power of Svelte, FS-based routing, __layouts, etc. All these goodies are affected by the extremely involved process required due to the fact that SvelteKit tries to support SSR / SSG. I do not care about SEO and search engines have learned to cope with dynamically generated layouts (or have to learn). I mostly care about all the power Svelte gives, and its design philosophy, plus the goodies that are added in SvelteKit. If SvelteKit had a way to provide all of that except SSR / SSG, I am sure we were enjoying 1.0 by now. I have struggled, for whole my weekend, to locally add Bootstrap's JS bundle to a simple SvelteKit project, and failed. Even with Describe the proposed solutionProvide a way to completely get rid of all the hassle of SSR / SSG for people that do not want / need it, and simplify their lives and at the same time, increase the number of people who fall in love with Svelte / SvelteKit. Something is missing somewhere between Svelte and SvelteKit. Alternatives consideredNo response Importancei cannot use SvelteKit without it Additional InformationNo response |
Beta Was this translation helpful? Give feedback.
Replies: 9 comments 22 replies
-
|
Add a export const ssr = false;This disables SSR for all pages and you can use libraries that only work in the browser without additional checks. See the docs for more details https://kit.svelte.dev/page-options#ssr For the adapter you can use
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
fallback: 'index.html',
}),
prerender: {
entries: [],
},
};
export default config; |
Beta Was this translation helpful? Give feedback.
-
|
as mrkishi wrote in #4849 (comment)
more discussion/links here #1503 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
If I set ssr to false on the root layout, I just get a blank page... |
Beta Was this translation helpful? Give feedback.
-
|
A lot of things has changed since this discussion... please consult the documentation. |
Beta Was this translation helpful? Give feedback.
-
|
Actually, setting ssr to false in the root layout is exactly the solution the docs still have: https://kit.svelte.dev/docs/single-page-apps |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @dummdidumm, I will try the solution. Two minor issues: This should be more visible, as many people may need it, and, it is so much better to have a minimal example somewhere, so people can base their work on. |
Beta Was this translation helpful? Give feedback.
-
|
Still the same issue: <script>
import 'bootstrap';
</script>In export const handle = async function handle({ request, resolve }) {
const response = await resolve(request, {
ssr: false
});
return response;
}In import adapter from "@sveltejs/adapter-static";
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
fallback: 'index.html',
}),
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
},
};
export default config;Now, Any idea? |
Beta Was this translation helpful? Give feedback.
-
This bit worked for me, thanks @mossaiby |
Beta Was this translation helpful? Give feedback.
-
|
@Badlapje You're welcome! FYI, if you upgrade your SvelteKit version, you'll need this instead: export const handle = async ({ event, resolve }) => {
const response = await resolve(event, {
ssr: false,
});
return response;
}; |
Beta Was this translation helpful? Give feedback.
-
|
The following import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
fallback: 'index.html',
}),
prerender: {
enabled: false,
},
ssr: false,
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
},
};
export default config;I am not sure if Thanks @dummdidumm for helping out! |
Beta Was this translation helpful? Give feedback.
-
|
@dummdidumm I am getting this now when running It seems that the locally served site works fine, though. Any idea? This is getting really annoying... |
Beta Was this translation helpful? Give feedback.
-
|
Are you using the latest version of SvelteKit? This feature is very new. |
Beta Was this translation helpful? Give feedback.
-
|
You are probably right... I did a |
Beta Was this translation helpful? Give feedback.
-
|
Hello, From the adapter-static github page: This seems a bit vague to me and not sure how it would apply to SvelteKit specifically. In the Surge example it is simply showing the HTML file as being: What would the SvelteKit equivalent be? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Please open a separate discussion for this, the original question has been answered. |
Beta Was this translation helpful? Give feedback.
-
|
I was wondering for a long time about this; I tried to take it literally blank to start, and to my surprise, the fallback page IS CREATED for you by the |
Beta Was this translation helpful? Give feedback.
-
|
@mossaiby Thanks for that info! I will play around with it as soon as I can get a chance to. @dummdidumm New discussion created at #3413 |
Beta Was this translation helpful? Give feedback.
-
|
@BillBuilt You're welcome! @dummdidumm I also duplicated my answer there, as promised. |
Beta Was this translation helpful? Give feedback.
-
|
This information is already obsolete? I followed this discussion and nothing worked :) IMHO not having a simple option to roll out html like vanila svelt has and decouple server from backend is the most sad thing about sveltkit as I won't be able to use it. And I bet there are others in the same situation as serverless is more and more used. |
Beta Was this translation helpful? Give feedback.
-
|
I updated the answer to match the latest version of SvelteKit |
Beta Was this translation helpful? Give feedback.
-
the prerender, ssr and target parameters are causing the npm run dev to produce an error: Is this still up-to-date? If not, is there a way to hide this from search engine indexers? |
Beta Was this translation helpful? Give feedback.
-
|
As far as I know, things have DRASTICALLY have changed since this was written. See the docs for more information. |
Beta Was this translation helpful? Give feedback.
-
|
After reading this thread's replies, I'm still puzzled by a few things:
Much thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the explanation! So according to your saying
If I'm using |
Beta Was this translation helpful? Give feedback.
-
|
I believe so; to quote the documentation:
Bear in mind that in development your application is essentially running using In general: if you are planning to just build an entirely client-side pile of HTML, I'd suggest using the most specific adapter for the job, which is |
Beta Was this translation helpful? Give feedback.
-
|
Great explanations! In fact, I need my app to be client-side only because I'm concerned about using |
Beta Was this translation helpful? Give feedback.
-
|
I'll note that this isn't next.js, so you shouldn't make decisions about SvelteKit based on it. There's a useful variable called Essentially, that means that in a component, you can do the following: import { browser } from '$app/environment;
import { onMount } from 'svelte'
onMount(() => {
// things that should happen when the component mounts in any environment
if(browser) {
document.doSomethingOnlyAvailableInADOM();
}
})This allows a component to have browser-specific functionality without requiring the whole app just assumes it's all one big SPA. |
Beta Was this translation helpful? Give feedback.
-
|
Wow, I didn't notice this feature before and I'm just learning Svelte for a few days. Still, thanks for pointing it out for me! |
Beta Was this translation helpful? Give feedback.
Add a
src/routes/+layout.jsfile withThis disables SSR for all pages and you can use libraries that only work in the browser without additional checks. See the docs for more details https://kit.svelte.dev/page-options#ssr
For the adapter you can use
adapter-staticwith SPA mode: https://github.com/sveltejs/kit/tree/master/packages/adapter-static#spa-modesvelte.config.jsthen looks something like this: