Appearance
Server-side Rendering
Server-side rendering (SSR) builds each page on the server, so search engines and social networks receive a complete page instead of an empty one that is filled in by JavaScript. Shoppers also see the page sooner on their first visit. After that first page, the store continues as a single-page app.
With SSR on, the home page of a test store scores 99 for performance in Lighthouse's mobile mode. See Lighthouse scores.
SSR is optional. Without it, Lynx pages are drawn in the browser, which search engines such as Google can still index. Turn it on when search traffic matters most to you.
What SSR does
Without SSR, a Lynx page arrives with Magento's title and meta tags but an empty body, and the browser draws the page once its JavaScript has loaded. With SSR, the server sends the page already drawn, so:
- Search engines and link previews read the content straight away, including those that do not run JavaScript.
- Shoppers see the page sooner on their first visit, before the JavaScript has downloaded.
- Nothing is drawn twice. When the JavaScript arrives, it takes over the page that is already there, and from then on the store runs as a single-page app.
Only the first page of a visit is rendered on the server. Pages the shopper moves to afterwards are drawn in the browser, as they are without SSR.
Where the renderer runs
Lynx renders pages with the same Vue code that runs in the browser, inside a small JavaScript process. There is no headless browser or prerendering service to run. You need one of these:
| Option | Best for |
|---|---|
| A Node.js process next to Magento | Servers where you can run a long-running Node.js process, such as a VPS, a dedicated server or a container setup. The renderer sits right next to Magento, with no network trip in between. |
| A Cloudflare Worker | Hosting that does not allow Node.js processes, such as many shared or managed Magento hosts, and stores that would rather not run one more service. Nothing extra runs on your server, renders are fast, and Cloudflare scales them with your traffic. |
Magento does not care which one you use: it only needs the address of the renderer. You can switch later by changing one setting.
How it works with the cache
Rendering only happens when a page is not already in Magento's full page cache. Once a page has been rendered, the finished HTML is cached like any other page, so most visitors are served straight from the cache.
If the renderer is slow or unavailable, Lynx waits no longer than the Timeout you set and then lets the browser draw the page instead. Shoppers never see an error because of SSR.
Cart, checkout and account pages are never rendered on the server. They are personal and not cached, and search engines do not index them.
Setting up the renderer
The renderer is set up by your developer or hosting provider, as a Node.js process or as a Cloudflare Worker. The steps are in SSR Internals. They give you the Renderer URL to enter below.
A Cloudflare Worker needs a paid Workers plan
Rendering a page takes more processing time than the free Workers plan allows for each request. Subscribe to the Workers Paid plan on your Cloudflare account. It costs a few dollars a month and covers millions of requests.
After each Lynx update, the renderer is updated too, so it matches the store.
Turning it on
Go to Stores › Configuration › Lynx › SSR:
| Setting | What to enter |
|---|---|
| Enabled | Yes |
| Renderer URL | http://127.0.0.1:13714 for Node.js, or the Worker's address. Use Test Connection to check it. |
| Timeout (ms) | How long a render may take before the browser takes over. The default is 2000. It is only a ceiling: a page that renders sooner is returned at once. Raise it only if var/log/system.log often shows Lynx SSR: renderer did not answer. |
| Routes | The pages to render, one per line. The default list covers the home page (cms_index_index), categories (catalog_category_view) and products (catalog_product_view). Add cms_page_view for CMS pages. A * at the end matches by prefix, so catalog_* covers all catalog pages. |
| Customer Groups | Which visitors receive rendered pages. Keep NOT LOGGED IN selected, since search engines are never signed in. |
Save, then flush the cache so pages are rendered on their next visit.