How SSR is different from FPC in Magento 2

Tanya Garg

11 February 2022

In a series of latest techniques that can help improve Magento 2 speed and customer experiences.

Till now we had discussed many features like – TTFB, Signed Exchange, Preload, Prefetch, and Preconnect, SSR, and Headless Architecture.

Now we will discuss Full page cache(FPC) in comparison with SSR.

As you may be aware, caching is one of the most powerful strategies for ensuring that your consumers get what they want as quickly as possible without wasting time waiting for pages to load.

Server-Side Rendering(SSR)

The ability of an application to turn HTML files on the server into a fully rendered HTML page for the client is known as server-side rendering (SSR).

The most popular technique of showing content is through SSR. It works by translating HTML files on the server into information that can be used by the browser.

Your browser sends a request to the server when you visit a website. Your browser interprets the content and shows the page after this request has been processed.

In just a few milliseconds, data from the database is retrieved, an HTML page is created, and the page is sent back to the browser.

The page, layout, CSS, JavaScript, and HTML content are loaded in the first request with SSR. The server will deliver HTML responses that are ‘Ready to be rendered’.

The user’s browser renders the page and downloads the JavaScript right away so that it can be viewed.

Full page Cache

Magento 2 comes with a full-page cache on the server by default, which helps to speed up the display of various pages like category pages, product pages, and CMS pages.

By enabling the full page cache, you can improve your store’s response time and reduce the time it takes for customers to wait for the server to reload.

Customers will have a better experience, and you will be able to raise conversion rates right away.

A full-page cache(FPC) module in Magento 2 stores all of the HTML code for a created page within cache storage. Magento’s default storage is File cache or Varnish cache.

Varnish Cache

Varnish is a caching HTTP reverse proxy that can also be used as a front-end accelerator.

It isn’t a stand-alone solution because it relies on a dedicated web server such as NGINX or Apache.

Benefits

Varnish is capable of caching the backend response on RAM.
It serves cached content from RAM which is faster than the disk(HDD/SDD).
All static assets that don’t change frequently, such as CSS and JavaScript files, are delivered by the cache server.
The overall response time( Time To First Byte) is less which will help you saving server resources.

How Varnish Cache Works?

The principle behind caching is that your server shouldn’t have to re-generate dynamic content every time the same request comes.

Put a caching proxy in front of your web service, such as Varnish, to minimize server effort and accelerate replies to HTTP requests.

Varnish works by intercepting requests before they reach your backend, which might be Apache, Nginx, or any other web server.

If it doesn’t already have a response cached, it will send it to your backend and cache the results.

These cached responses can then be stored in memory and retrieved and provided to clients much faster than if they were read from a disk.

How FPC is different from SSR

Independent

Whether SSR is enabled or not on the application server it will never store any kind of server response.

But the varnish will always cache the backend or server response whatever the response will be.

SSR and FPC can work independently.

Data processing time

SSR needs to process the request to deliver the ‘ready to be rendered’ file on the server which will some data processing time.

Varnish, on the other hand, has nothing to do with data processing while caching the data. There is no need to process the cached data.

Underlying Storage

If you are using a file system then the performance of caching data will completely depend on your disk driver speed, it stores data on disk.

However, varnish stores cached data in RAM, which is faster than the disk.

Only an SSD drive with a sufficient amount of IOPs will allow SSR to function properly.

Shared or Dedicated Hosting

If you are using a shared hosting service then it may reduce rendering efficiency due to limited resources provided among a group of people.

You can use dedicated hosting for caching data more rapidly.

Redis

Redis can be used as a stand-alone server for storing replicated data in RAM for the main server.

If the main storage fails, the data can be read from another server, allowing your organization to continue operating normally.

Varnish

Varnish, like Redis, keeps data in RAM, but the way it works and handles data makes it the ideal website caching option.

The thing is, it caches the responses from the webserver. Visitors’ queries do not even reach a web server when data is loaded from the cache, and Magento pages are fetched directly from the Varnish.

Due to the server’s restricted RAM, Varnish and Redis may only be able to store a limited amount of data.

Content Delivery Network

The CDN can also be used as a reverse proxy in Magento 2. It, like Varnish cache, may handle client requests and provide data without making a request to the main server.

Despite cost concerns, CDN allows you to keep any amount of cached data on the server.

Conclusion

Full-page caching(FPC) in Magento 2 saves a page’s fully rendered HTML code to memory. If desired, the page can now be seen without re-rendering.

A page must first be rendered as a response from the server-side rendering server before it can be cached. With this in mind, we aim to make sure that responses are rendered as quickly as possible.

This is critical for both the user experience and SEO. While users may quit a website that takes too long to load, Googlebot has a limit on how long it will crawl for the first byte.

If your page’s rendering surpasses that limit, Googlebot will not crawl it! To avoid this, we must maintain the response time under three seconds, preferably considerably less.

The Full page cache(FPC) allows pages to be rendered faster, which enhances your website’s load speed and response time, greatly improving your customers’ experience.

Varnish becomes the finest solution for total site optimization and page load speed with Full Page Caching.

Note – SSR and FPC can work together or separately. However, when utilized in parallel, they can be quite effective.

Need Support?

Thank You for reading this Blog!

For further more interesting blogs, keep in touch with us. If you need any kind of support, simply raise a ticket at https://webkul.uvdesk.com/en/.