Using SSR.

frontend/src/routes/articles/+page.js

@@ -0,0 +1,31 @@
+// Server Side Rendering
+
+export async function load(context) {
+  async function fetchData(data) {
+    try {
+      const resTemp = await context.fetch(`http://0.0.0.0:8000/${data}`);
+      if (resTemp.ok == false) {
+        return {
+          status: resTemp.status,
+        }
+      }
+      return {
+        status: 0, data: await resTemp.json(),
+      }
+    } catch (error) {
+      return {
+        status: 500,
+      }
+    }
+  }
+
+  const res = (await fetchData(`get_simple_posts/4`));
+  if (res.status == 500) return {
+    status: res.status
+  }
+
+  return {
+    status: 0,
+    content: res.data,
+  };
+}

frontend/src/routes/articles/+page.svelte

@@ -1,34 +1,20 @@
 <script>
 	import '$lib/css/base.css';
 	import '$lib/css/article.css';
-
-	import { onMount } from 'svelte';
-	import { load } from '$lib/js/apicall.js';
-
 	import CarouselVertical from '$lib/components/carousel-vertical.svelte';
 
-	$: isLoaded = false;
+	export let data;
-	$: hasLoadFailed = false;
+	// Database
-	let post_min; // slug, author, title, date
+	const article = data.status == 0 ? data : undefined;
-
-	onMount(async () => {
-		const loaded_post = await load("get_simple_posts/4");
-		if (loaded_post.status == 200) {
-			post_min = loaded_post.data;
-			isLoaded = true;
-		} else hasLoadFailed = true;
-	});
 </script>
 
 <div>
 	<h1>Etheryo Blog</h1>
-	{#if isLoaded}
+	{#if data != undefined}
-		<CarouselVertical posts={post_min} />
+		<CarouselVertical posts={article.content} />
 		<!-- debug purpose -->
 		<div style="height: 100rem;"></div>
-	{:else if hasLoadFailed}
-		<p>Loading failed :c</p>
 	{:else}
-		<p>Loading...</p>
+		<p>Loading failed :c</p>
 	{/if}
 </div>