Go + SvelteKit vs. Svelte (SSR Query) – Getting Assist

Sure. In all probability the best means you could possibly do that is: construct your app utilizing Svelte (which can depart you with JS/HTML), then serve that static content material out of your Go executable. I do an identical strategy on a regular basis. When doing deploys, have your front-end framework compile to ./public or one thing related, then serve that static content material like this:

// Serve our static js/html/photos:
http.Deal with("https://discussion board.golangbridge.org/", http.FileServer(http.Dir("public")))

The one different “gotcha” to CSR is: they will land on any web page in your app and/or hit refresh button so that you must both have a fallback that serves index.html on “not discovered” or hold observe of routes and serve index when a consumer lands on a route like yourapp.com/customers/1:

// For all SPA routes we may also serve up /index.
// Register any front-end routes right here
spaRoutes := []string{
	"/dwelling",
	"/faq",
	"/login",
	"/customers/{id}"}
for _, route := vary spaRoutes {
	http.HandleFunc(fmt.Sprintf("GET %v", route), indexHandler)
}

The place indexHandler simply serves up index:

func indexHandler(w http.ResponseWriter, r *http.Request) {
	http.ServeFile(w, r, "./public/index.html")
}

There are different methods of undertaking this as properly however that is most likely the only.

When it comes to your API and the way it interacts together with your internet app: you’ll simply create routes that return JSON and your Svelte app would replace the UI based mostly in your RESTful API. Once more – I’m not a Svelte dev however one thing like this:

// essential.go the place you're establishing routes
http.HandleFunc("POST /api/gadgets", getItemsHandler)
//...
func getItemsHandler(w http.ResponseWriter, r *http.Request) {
	// Fetch gadgets from wherever
	gadgets := getItems()
	w.Header().Set("Content material-Kind", "software/json")
	json.NewEncoder(w).Encode(gadgets)
}

Create a load perform in svelte (or one thing related):

// web page.ts
import sort { PageLoad } from './$varieties';

export const load: PageLoad = async ({ fetch, params }) => {
	const res = await fetch(`/api/gadgets`);
	const gadgets = await res.json();
	return { gadgets: gadgets };
};

Then in your .svelte file:

<script lang="ts">
	import sort { PageProps } from './$varieties';
	let { knowledge }: PageProps = $props();
</script>

<h1>Objects</h1>
<ul>
{#every knowledge.gadgets as merchandise}
	<li>{merchandise}</li>
{/every}
</ul>

I don’t know concerning the digital DOM within the svelte world. Frameworks use digital DOMs as a result of DOM manipulation is pricey. By holding observe of adjustments you possibly can solely replace the DOM when that you must. So, I’m not 100% positive how svelte manages its’ DOM manipulation however I wouldn’t fear about that an excessive amount of.