Module not working on SSR

[zweeen]

Hi @mvrlin , thank you for this awesome module you rock 😃.

I use the latest nuxt version 3.9.1 and nuxt-viewport 2.1.0, but it seems that this module doesn't work on SSR. I tried it 2 month ago (I think) and it's worked perfectly client side and server side.

When I refresh the page I can see the value returned by the composable updating.

What is expected: when refreshing the page the value must stay the same.

Here an example of the bug:

https://stackblitz.com/edit/github-xt2p8e?file=app.vue,nuxt.config.ts

[mvrlin]

Hi, @zweeen!

It doesn't work inside stackblitz, because cookie SameSite=Strict, I can remove that. For now try to test here

I split the plugin into client and server, tested in different versions of Nuxt and everything worked. That's the only thing that could have broken.

Have you tried to use the previous version inside your project, did it solved the issue?

https://github.com/mvrlin/nuxt-viewport/assets/24970784/d189945e-61a8-4622-93e1-1f82c2309815

[zweeen]

Hi @mvrlin,

Sorry for my late response.

It's working as you said. When cookie same-site is set to strict it doesn't work when we load the page for the very first time. Can you remove it, or may be it's better to pass it as config option (and all other cookie options btw) like the cookieName.

Thanks in advance 🙂

[mvrlin]

Hey, @zweeen. Please, check out the latest release https://www.npmjs.com/package/nuxt-viewport#default-configuration

[zweeen]

Thanks a lot @mvrlin for your super reactivity 🙂 .

The release is just perfect 👌🏼.

I close the issue.

[norbertSG]

@mvrlin on SSR rendered app when you enter first time and the viewport cookie is not setted the fallbackBreakpoint value is set. Also when you have a tab opened on mobile view, and you close it and open a new tab the viewport cookie is the first tab value.

Is there a solution, or workaround for this ?

[mvrlin]

@norbertSG Can you give more information about the first request? What do you expect? You want Set-Cookie header? About tabs sync I can investigate this https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel

[norbertSG]

1. When you enter first time on the app i would like to get from the server the correct viewport, as the nuxt/device plugin works, right now on the server is undefined and on the client will be set to the correct value.

2. Tabs switching issue, i would like when i open a new tab on the same browser, to update the viewport value in the cookie, and do not take it from the cookie if is set, the cookie could be uniq per tab. Because if i have the app opened and i open the devtools then the viewport size will be xs(mobile) if i close the tab and open a new one it will take the value from the cookie and set it to xs(mobile) not the actual viewport of desktop.

[mvrlin]

@norbertSG

1. It's not actually undefined, it tries to guess based on User-Agent. This is how it works on the server:

2. Read the cookie and validate the value.
3. If cookie is not valid, then try to guess by User-Agent.
4. Returns fallback.

   
   On client side, it will read the cookie value as the base value, then when `suspensed` hook is triggered will compute the browser width and set the correct value and update the cookie.

Are you asking for Set-Cookie on the first request?

2. I don't think that it's possible to fix it. You can have a tablet version in one tab, a mobile version in another. The cookie will be set to the latest value. Maybe Session cookie can fix it, but that will not be persistent.. Do you have any thoughts on that?

[norbertSG]

@mvrlin

1. I re-tested and it's ok how it's working.
2. When closing a tab that was previously opened in ‘mobile’ view and opening a new one in ‘desktop’ view, I propose conducting a server-side check (SSR). This check would determine if the value of the viewport cookie differs from the viewport value derived from the user-agent. If there is a discrepancy, the viewport cookie value should be updated. Is this feasible to implement?

[mvrlin]

@norbertSG I don't see the point of checking if the cookie is the same as the server guessed. Because I can have mobileMedium in the cookie, but the server will detect only mobile based on the User Agent without knowing the screen size.

[norbertSG]

@mvrlin

Logs from the server:

Cookie: viewport desktopWide curren bp [] 640 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1 Cookie: viewport desktopWide

I am talking about this scenario, because initial i had in the cookie desktopWide will return desktopWide from the server, and the update to mobile will be done on the client, but here we could check if the cookies value is different from the user agent then return the user agent derived value into the cookie

[mvrlin]

@norbertSG I understand you, but what about my example when you have mobileMedium in cookie and server detects from User-Agent as mobile?

[norbertSG]

@mvrlin in my point off view you can keep the one from the cookie, its much more appropriate, just then overwrite the cookie value when is different device(mobile,tablet, desktop)

[mvrlin]

@norbertSG that's quite difficult to do due to breakpoints naming, I don't have control about how breakpoints will be named.