Issue with SSR

Ask the community
,
1

Hi,
I’ve been implamanting the new SSR rendercycles in my webapp and it used to work until recently.
Today I’ve noticed that on mobile, event if I add “?forceSsr=true”, it still only runs a 2nd cycle (client side).

To test it, I’ve made this test, I used chrome emulation from the devtools. When I use it in mobile I get only render cycle 2 and when I run it as desktop I get render cycle 1. Can you please help me?

$w.onReady(function () {
console.log(“Page’s render cycle:”,wixWindow.rendering.renderCycle)
}

Thanks,
Itamar

2

.

3

Hey Itamar,

When the render runs on the server, the console.log() calls are logged to the server, so you won’t see them.

4

Thank you Sam.
If I set value for a variable only in server render cycle. on mobile with ForceSSR, it still doesn’t work on mobile.
It works only on Desktop.

For example:

let test;
$w.onReady( ()=> {
if (wixWindow.rendering.renderCycle === 1) {
test = 10;
}
console.log(“Testing:”,test);
}

5

The renderCycle property does not let you know where the code is running. You can get a 1 on the server or on the client. Use the env property to check where the code is running.

In your code sample:

  • On mobile renderCycle 1 is happening on the server and you don’t see the console.log that gives you 10. You only see the second console.log that happens on the client. There you don’t assign a value to test (you have a new test variable on the client, it is not the same as the one on the server).

  • On desktop renderCycle 1 is happening on the client so the console.log should give you the value you assign to test.

6

I wish to use a function that will get related data according to the userId and render the page on browser the data received. Can you make a small example on how you’ll do so with the new SSR?

7

Hi Itamar.

Can you please elaborate the use case?
Do you want to update a value of a component according to some data related to currently logged in user?

Regards,
Genry.

8

I would do it similar to the example here: Velo: About the Page Rendering Process | Help Center | Wix.com

But using a query() instead of insert.

9

Thanks Sam & Genry. I’ve made the condition for the renderCycle and return the function of the loading data and it works!
However, when I’m moving between pages using wixLocation.to(), sometimes it doesn’t go into the 1st renderCycle and I need to reload the page in order to get my data on.
I’ve cleaned the cache, used different devices. Do you have any idea?
This is the code I use:
getUser - is a function in the backend that calls a 3rd party service
$w.onReady(function () {
user = wixUsers.currentUser;
userId = user.id;
if(wixWindow.rendering.renderCycle === 1){
return getUser(userId)
.then((data) => {
fillInfo(data.result);
})
.catch(err => console.log(err));
}
}

10

Hi Itamar,

why are you validating the code is executing only once? renderCycle === 1

Shlomi

11

Because I want to pull the data only once

12

Hi Itamar,

can we please create a basic and very simple scenario which you are trying to create, i want to create a simple working code to reproduce the issue.
the getUser and fillInfo are vague. didn’t understand what should happen only in the browser and what should happen only once
shooting in the dark here, maybe this is what you were looking for:

 if (wixWindow.rendering.env === "browser")

Shlomi

13

Shlomi,
The code is running just fine when I enter a page by address or reload. The problem is when I’m moving between pages, from some reason it doesn’t execute it.
The getUser is a function in the backend that fetches to an API and retrieve the user data (not in Wix).
The fillInfo in a local function that goes over all the page components and update everything according to The data retrieved from the getUser function.

14

Hi Itamar,

indeed either a misunderstanding or a bug, anyway its best to look into it.
can you please either share a simple example to reproduce, or the url of the site you are working on

thanks,
Shlomi

15

Hi Itamar,

Server-Side-Rendering works only for first page load - the idea to optimize the first rendering.
All navigations inside the site are client only.

import {multiply} from 'backend/mymod';
import wixWindow from 'wix-window';

$w.onReady(function () {
	if (wixWindow.rendering.env === "backend" && wixWindow.rendering.renderCycle === 1) {
		return multiply(4, 5).then(()=>{
			$w("#text1").text = wixWindow.rendering.env.toString();
		})
	} 
	else console.log(wixWindow.rendering.renderCycle)
});

Look at my example code above, runs explicitly only in server, so it doesn’t run when navigating between pages.
Thanks.