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

Sure. In all probability the simplest means you may do that is: construct your app utilizing Svelte (which can go away 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 comparable, 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’ll land on any web page in your app and/or hit refresh button so you’ll want to both have a fallback that serves index.html on “not discovered” or preserve monitor of routes and serve index when a consumer lands on a route like yourapp.com/customers/1:

// For all SPA routes we can even 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 carrying out this as effectively however that is in all probability the only.

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

// predominant.go the place you might be establishing routes
http.HandleFunc("POST /api/objects", getItemsHandler)
//...
func getItemsHandler(w http.ResponseWriter, r *http.Request) {
	// Fetch objects from wherever
	objects := getItems()
	w.Header().Set("Content material-Sort", "utility/json")
	json.NewEncoder(w).Encode(objects)
}

Create a load operate in svelte (or one thing comparable):

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

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

Then in your .svelte file:

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

<h1>Objects</h1>
<ul>
{#every information.objects 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 dear. By protecting monitor of adjustments you may solely replace the DOM when you’ll want to. So, I’m not 100% certain how svelte manages its’ DOM manipulation however I wouldn’t fear about that an excessive amount of.