Server-side fetching to the storyblok api

[RealFX-Code]

Description

Hi, I would like a way to store the access token server-sided in my application and keep it hidden from the client viewing the site. I have moved all my storyblok api logic to the server and experience wired issues. (Please see the video/source code/image i've provided)

Suggested solution or improvement

(I don't know what to put here)

Additional context

https://github.com/RealFX-Code/rocks.realfx/tree/29fde13bc0e008157ddbee8616e5d8b61423b76e

https://streamable.com/utri2w

Validations

• Follow our Code of Conduct

[oscard0m]

I'm experiencing the same issue.

I tried to get the example shared by Roberto Butti here. It works if you clone the repo but if you update the versions of svelte[kit] and @storyblok/svelte it does not work.

Maybe @roberto-butti can give us some light here?

[roberto-butti]

I'm experiencing the same issue.

I tried to get the example shared by Roberto Butti here. It works if you clone the repo but if you update the versions of svelte[kit] and @storyblok/svelte it does not work.

Maybe @roberto-butti can give us some light here?

Hi @oscard0m and @RealFX-Code ,
I see the example repo i created for a workshop is quite old. I will try to update it and see how to fix the eventual issue.

[roberto-butti]

This repository works: https://github.com/roberto-butti/sveltekit-storyblok-workshop
It uses updated versions of libraries.
I had to add the server options in the vite.config.js:

export default defineConfig({
+	server: { proxy: {} },
	plugins: [sveltekit(), basicSsl()]
});

Now i will try to clone the repo of @RealFX-Code and see if I can suggest something...

[RealFX-Code]

This repository works: https://github.com/roberto-butti/sveltekit-storyblok-workshop It uses updated versions of libraries. I had to add the server options in the vite.config.js:

export default defineConfig({
+	server: { proxy: {} },
	plugins: [sveltekit(), basicSsl()]
});

Now i will try to clone the repo of @RealFX-Code and see if I can suggest something...

@roberto-butti Found anything?

[roberto-butti]

Hi @RealFX-Code i cloned your repo locally, i switched on the branch, but i can't see the error. Can you share with me an updated branch that generates the issue? I will check it.

[RealFX-Code]

Hi, Did the “devel” branch not reproduce the issue?Regards, rlfx.On 1 Aug 2024, at 18:50, Roberto Butti ***@***.***> wrote: Hi @RealFX-Code i cloned your repo locally, i switched on the branch, but i can't see the error. Can you share with me an updated branch that generates the issue? I will check it. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[roberto-butti]

I got it.
Thank you @RealFX-Code for the clarification.
Using the devrel branch, I can replicate the issue.
The issue happens only in the CSR mode.
The scenario: I load the articles page (listing), then I click on the menu, and I access the single article page. Because I click the menu item, by default, the CSR mode is used (if you try to load the same page - the single article, refreshing, or accessing directly via URL, the issue is not present becuase the csr is not involved in the page rendering in this case).
It happens because you only load the list of dynamic components on the server side (layout.server).
And this is fine because i see you don't want to expose the token on the client side, so you need to avoid any storyblok code on the client.
To force this behavior, you can set export const csr=false; in the src/routes/+layout.server.ts.

You can ask why the articles list page doesn't have the issue. Because the articles list page doesn't load dynamic components via StoryblokComponent so it doesn't need the list of components

On the other hand, the example here: https://github.com/roberto-butti/sveltekit-storyblok-workshop/blob/afc0184faad0c8ef37a3972ed8586b636f68ea8e/src/lib/sblib.js#L8 uses a different approach. Because the Storyblok configuration in my example is allowed to be loaded both on the client side and on the server side, I created a common function to be loaded in all scenarios.

Let me know if i was clear,

PS: if you want to protect the access token, you can avoid to set in the stone the token in the code. You can use the env variable: https://github.com/roberto-butti/sveltekit-storyblok-workshop/blob/afc0184faad0c8ef37a3972ed8586b636f68ea8e/src/lib/sblib.js#L5

Roberto

[RealFX-Code]

@roberto-butti That seemed to fix the storyblok loading, but also broke all of my interactive components. Trying to open the navbar on smaller devices doesn't work, the light/dark mode toggle doesn't work, etc.
EDIT: Yea I see it here, I'll have to look into a fix. https://kit.svelte.dev/docs/page-options#csr

[roberto-butti]

@RealFX-Code i see you closed the issues, i suppose that you fixed also the nav bar issue. is it correct?

[RealFX-Code]

@roberto-butti No, I closed it as the original issue was fixed, but thinking on it now it's only partially fixed as it also broke other stuff...

[roberto-butti]

from the doc:

Disabling CSR does not ship any JavaScript to the client. This means:

• The webpage should work with HTML and CSS only.
• <script> tags inside all Svelte components are removed.
• elements cannot be [progressively enhanced](https://kit.svelte.dev/docs/form-actions#progressive-enhancement).
• Links are handled by the browser with a full-page navigation.
• Hot Module Replacement (HMR) will be disabled.

So i think that in your case "CSR" as false is "too much".

In this case I think you should evaluate using the useStoryblok function approaches to be loaded from component and from server.js https://github.com/roberto-butti/sveltekit-storyblok-workshop/blob/afc0184faad0c8ef37a3972ed8586b636f68ea8e/src/lib/sblib.js#L8

[RealFX-Code]

from the doc:

Disabling CSR does not ship any JavaScript to the client. This means:

• The webpage should work with HTML and CSS only.
• <script> tags inside all Svelte components are removed.
• elements cannot be progressively enhanced.
• Links are handled by the browser with a full-page navigation.
• Hot Module Replacement (HMR) will be disabled.

So i think that in your case "CSR" as false is "too much".

In this case I think you should evaluate using the useStoryblok function approaches to be loaded from component and from server.js https://github.com/roberto-butti/sveltekit-storyblok-workshop/blob/afc0184faad0c8ef37a3972ed8586b636f68ea8e/src/lib/sblib.js#L8

It must be something on my end, as I can't seem to get it to work. I've used the function in the example you sent, but still get the same error when viewing an article.

Here's a Link to a tree that uses the function and doesn't produce the expected result:
https://github.com/RealFX-Code/rocks.realfx/tree/b03b318fd8060274986ee6283954789c6c2b14ce

Thanks a lot for your patience with me.