We’re excited to announce that, starting soon, your sites will start loading faster in certain circumstances, thanks to the magic of server-side rendering.
Now that your code may run on the server or the browser, there are a few things you might want to know, and some changes which are important to understand.
When server-side rendering is used, your site’s pages will load faster. In most cases you won’t have to do anything at all to take advantage of the increased performance. You can, however, leverage the new Rendering API to further improve your site’s loading time. To learn more about what server-side rendering is and how to harness its power, see About the Page Rendering Process .
Important
When server-side rendering is used, some of your code will run twice, once server-side and once client-side. Although the code runs twice, the end result is still a faster load because the server is able to do all of the heavy lifting that takes longer when done on the client. However, this may change the behavior of your existing code. Read below to understand when this affects your site and what you can do to restore your desired behavior.
Rollout
Server-side rendering will be rolled out in two parts.
-
Beginning today, you will be able to use the new Rendering API. However, sites will still not use server-side rendering.
-
Two weeks from now we will begin rendering sites server-side.
Use the time between now and 11 March to get your site ready for server-side rendering if needed.
What you need to do
There are some situations where your current onReady() or global code will cease to work as expected.
These include:
-
Code that causes a side effect.
-
Code that must be run in the browser.
Here are three common examples of where your code might break and what you need to do for your code to work properly with server-side rendering.
Adding collection data from onReady() or global code
Problem: If you add data to your collection in your onReady event handler or in your page’s global code, that data will be added twice when server-side rendering is used.
Reason: Your onReady and global code run twice when server-side rendering is used. The data is added to your collection each time the code runs.
Solution: Use the renderCycle property of the Rendering API to make sure the data is only added the first time your code runs.
In the example below, the insert() call is wrapped in an if() that checks which render cycle is being run. The insertion will only occur during the first render cycle. If there is a second render cycle because server-side rendering is being used, the item will not be inserted a second time.
import wixData from 'wix-data';
import wixWindow from 'wix-window';
let toInsert = {
"field1": "Some value",
"field2": "Some other value"
};
$w.onReady(function () {
if (wixWindow.rendering.renderCycle === 1) {
return wixData.insert("myCollection", toInsert)
.then(item => {
$w("#myText").text = item.title;
});
});
Retrieving storage data from onReady() or global code
Problem: If you try to retrieve data using wix-storage and use that data to populate a page element, the page will flicker when server-side rendering is used.
Reason: The data you’re trying to retrieve is stored in the user’s browser. When you try to retrieve it on the server, it isn’t there. So the element is populated with empty data during the server-side rendering. This is displayed on the screen for a moment before the client-side rendering replaces the empty data with the data retrieved from the client’s browser.
Solution: Use the env property of the Rendering API to make sure the data is only retrieved when your code is run in the browser.
In the example below, the getItem() function is wrapped in an if() that checks which environment the code is being run in. The retrieval will only occur when rendering client-side. If there was also a server-side render, no storage retrieval would have been attempted.
import {local} from 'wix-storage';
import wixWindow from 'wix-window';
$w.onReady(function () {
if (wixWindow.rendering.env === "browser") {
$w("#myText").text = local.getItem("key");
}
} );
Using 3rd party analytics to track site events from onReady or global code
Problem: If you send analytics events to a 3rd part app, two events will be sent when server-side rendering is used.
Reason: Your onReady and global code run twice when server-side rendering is used. The the analytics event is sent each time the code runs.
Solution: Use the renderCycle property of the Rendering API to make sure the event is only sent when rendering in the browser.
In the example below, the trackEvent() call is wrapped in an if() that checks which environment the code is being run in. The event will only be sent when rendering client-side. If there was also a server-side render, an event would not have been sent.
import wixWindow from 'wix-window';
$w.onReady(function () {
if(wixWindow.rendering.env === "browser") {
wixWindow.trackEvent("ViewContent", {
id: "P12345",
name: "Really Fast Running Shoes",
category: "Apparel/Shoes",
price: 120,
currency: "USD",
brand: "Adidas",
variant: "Black",
position: 1
} );
}
} );