Server-Side vs Client-Side Rendering And Changing SEO Practices

by | Nov 8, 2020 | Magento2, MagentoB2B

WHAT IS SSR? AND WHY IS IT IMPORTANT? Since their invention, search engines have analyzed websites by reading the HTML generated by their servers. The term Server-Side Rendering (SSR) is fairly new, though. Until the last few years, we just called it “rendering,” since it was the only way Web pages were served. The Web has matured into a rich application platform. Everyone now expects Web pages to be as interactive and dynamic as any other graphical interface, and we achieved that by inventing ways to write HTML on the fly with JavaScript. Much of the modern Web is built with these more flexible client-side rendering (CSR) techniques. They have proved to be the best way to author reliable and scalable dynamic websites. Search engine crawler bots aren’t full-fledged Web browsers, though. They have to move rapidly through a vast web of content. For years, these bots didn’t run JavaScript and didn’t support CSR; if your site used CSR to display its content and functionality, the Googlebot just wouldn’t see it. Because this was the case for so long, SSR is well recognized as the content rendering method best suited for ensuring HTML content is readily available for modern search engine crawlers/bots. At this point, we’ll assume that knowledge of SSR is well understood from a strategy and execution perspective. It’s a basic feature of the Web platform CSR is beneficial to the end-user experience, but it raises a number of questions around ensuring consistent ranking and placement requirements within search engine results. Most major sites, and especially most eCommerce sites, have addressed this by rendering the “indexable” content of a Web page on the server and then switching to CSR to manage the page once it’s loaded. SSR is the great, time-tested solution here. We also know that – when not executed properly – SSR can make a site slower. Today, speed and performance are equally, if not more, important to ensure search engine ranking/placement. If a search engine could crawl CSR-generated websites, then it would be simplest and fastest to render the whole app with CSR, since you’re going to need it for the fancy parts. Right now, the largest search engines are starting to support CSR in their crawler bots, and eventually we will see many early adopters with very high result rankings, despite doing no SSR at all. However, businesses have come to rely on SEO and search engine marketing (SEM) as a critical factor for customer acquisition and generation of revenue. Anything that is counter to the strategies that have successfully worked over the past decade has the potential to have a significant impact on a business’ continued success. Asking merchants to make the leap to Progressive Web Apps (PWAs) and Web storefronts that rely heavily on CSR versus SSR is a tall ask. With PWA Studio, we’re attempting to build for what we view as the future of the Web (where reliance on SSR is no longer a hard requirement) while still accommodating for the present merchant needs and concerns. So let’s dive into the weeds a bit and review some of the arguments for and against SSR with PWA Studio, as well as some of the current options/capabilities for meeting these requirements.

IS SSR NECESSARY?

There’s really no simple answer here. There are arguments for and against SSR, especially in the context of PWAs and dynamic JS-based applications/storefronts. There is certainly no argument about the efficacy of SSR over the lifetime of the Web. It does, however, add additional overhead and cost to do it, so we need to be clear-eyed about how much SSR is still doing for us and whether it’s worth it. Given modern browsers and technologies, it’s justifiable to question the continued importance (and additional cost) of SSR – especially when it is increasingly evident that search engines are capable of indexing dynamic sites and continually improving their effectiveness. Common arguments for SSR typically boil down to: • We need to implement SSR because it has worked before and continues to work. We are not willing to risk our business objectives while developers wait around to see how the SSR/CSR story develops in the coming years. • Other big technology companies continue to invest in and have a reliance on SSR; it’s not just for SEO. • SSR is still needed to serve metadata for media objects since the SEM bots still aren’t running JavaScript. • As a partner or agency, not having a clear SEO strategy that relies on SSR is hindering our ability to build merchant confidence and improve adoption of PWAs. • There isn’t enough data/evidence that minimal (or even no) SSR actually works without having a significant impact on SEO. And arguments against SSR: • High-profile Web development leaders often discourage SSR because poor implementations can reduce performance and ranking. In PWAs especially, the UI should load as early as possible, even if it’s not fully loaded. SSR does a lot of up-front calculations which the CSR-driven client might not even use. • Risks of platform lock-in or code duplication. The premier experience of an eCommerce PWA is client-side, as a dynamic native-feeling JS app, but cross-platform SSR requires implementing that experience in two different places – the server and the client – and the logic can’t really be reused. The one solution to that is to use a server that can render HTML generated by the frontend UI code. The best server for this is NodeJS, since it can run the JavaScript UI code directly and generate HTML responses. But that does lock developers into a particular backend technology. • SSR increases TCO because of the additional tech requirements and the extra steps in development and continuous integration. It’s easier than it used to be, but it’s always extra work to write code that is going to run in two very different environments. • As search engines get better at indexing dynamic sites – and the major ones are great at it today – it becomes harder to justify the cost of SSR.

WHAT SSR SOLUTIONS EXIST FOR PWA STUDIO?

Does PWA Studio, today, support SSR? While there are a number of possible solutions and areas for enhancement, yes, PWA Studio does support and allow for SSR. If you’ve been a participant in our community #pwa Slack channel, then you know this has been a hot topic of late that we’ve spent a good amount of time covering in our weekly PWA Studio Community meetings. To summarize the current options for implementing SSR, today, with PWA Studio: • UPWARD provides a solution for simple SSR rendering of page data and metadata. This serves a simple use case that PWA advocates consider to be a best practice. For more complex requirements (rendering the full page React app), other solutions are available. • Prerender with a headless browser crawler. Jordan Eisenburger (Experius) recommends a Rendertron solution. It is noninvasive to the dev process, but first-time users may have difficulty setting it up. This tool is used on the Eleganza site and will go open source as SEOSnap. • Shane Osbourne (JH) recommends pre-endering the React app with something like ReactDOMServer because it is a well-known and supported approach. This approach is doable, capable, and fast, but it requires a NodeJS Web server in production, along with the other requirements of Magento 2. • Niklas Wolf (Mothership) recommends routing bots to a service such as Prerender.io to serve up prerendered HTML pages. This is similar to the prerender approach used by Experius, except it uses a SaaS prerenderer instead of a custom hosted one.

SO WHAT’S NEXT FOR PWA STUDIO AND SSR?

We’ve listened to and learned from our community, and we understand that our purposely minimal SSR solution doesn’t offer enough to confidently start new store deployments. SSR will be less important in the Web’s future; we remain certain. But we need to help you do more today. Our greatest hope is that PWA Studio will give you options for sane, simple SSR by opening up the server-side render rules as part of our new extensibility framework. We want an ecosystem of PWA extensions to grow, and they should include options for server-side render. Choice is good, and Magento isn’t Magento without powerful extensibility. However, we’re still committed to delivering improved tools and resources to simplify the developer experience and cost in this area. We continue to explore ways to improve the out-of-the-box SSR story for merchants and partners – whether it’s putting React SSR in the core, making Rendertron our preferred solution, enhancing UPWARD SSR abilities, or even retiring UPWARD entirely. We’re actively discussing and reviewing each option alongside our highly engaged community to make sure that, in the end, we deliver a viable and scalable solution that delivers best-in-class SEO for PWA Studio storefronts.]]>

How to Add Delete Action Column in Magento 2

by | Nov 6, 2020 | Magento2

Programmatic Solution to Add Delete Action Column in Magento 2: 1. Change code in Showdata.php file at app\code\Cozmot\Extension\Block\

2. Update showdata.phtml at app\code\Meetanshi\Extension\view\frontend\templates\ After making changes in Showdata.php and showdata.phtml files, you will manage to add ‘delete column’ in Magento 2. That’s it. I would be happy to answer your queries. Feel free to ask in the Comment section below. Share with post with newbie Magento developers. Thank you.]]>

How to Override Extension File in Theme in Magento 2

by | Nov 5, 2020 | Magento2

install a theme in Magento 2 and use it in their online store for a consistent look and feel in the store frontend or the admin area, with the help of custom templates, layouts, styles or images. When you are using a custom theme, the design of any third party extensions’ frontend may not match with the layout of your store. For example, a banner is displayed in the frontend when you enable a third party extension. This banner is not designed keeping in mind any custom theme designs. The solution to this issue is to override extension file in theme in Magento 2. The store owner can programmatically override the extension file and implement any changes required based on the business requirements without making any permanent changes in the original file. Moreover, when a new version of an extension is released, you do not need to customize the required changes each time. Hence, it is better to override the extension file when using custom themes in Magento 2 rather than making changes in the original file.

Method to Override Extension File in Theme in Magento 2:

Suppose, you want to override extension file in a theme. The theme file path is: The path when you override that file in theme will be: That’s it. Any doubts in the above method can be mentioned in the Comments section below. Also, do share the solution with Magento community via social media. Thank you.]]>

How to Install a Theme in Magento 2

How to Install a Theme in Magento 2

by | Nov 5, 2020 | Magento2

install a theme in Magento 2, take a look at the advantages of themes and how to choose the perfect one for your E-commerce business!  

Advantages of a theme in Magento 2:

  • The responsiveness characteristic makes it possible to offer the same environment to every user, regardless of the operative platform.
  • The responsive themes provide a scalable platform, i.e., adding new features and functions to already built theme is easier.
  • Improved security features with the Magento 2 themes.
  • The responsiveness nature is appreciated by Google and other search engines, giving you the SEO benefit!
  • Improved user experience, of course!
  • Easy installation process (We’ll see here how easy it is to install a theme in Magento 2!)
  • The free Magento themes are compatible with the new versions of Magento and are optimized for all important web browsers.
  • Absolute uniqueness for your Magento 2 store with custom themes.
 

Points to keep in mind while choosing the Magento 2 Theme:

  • A well-built store with elegant visual effect can work wonders. While an ugly theme can increase the bounce rate. Hence, focussing on the appearance, select a professional looking theme that represents your business.
  • A robust theme with advantages of SASS, Bootstrap 3, HTML5, and CSS3 makes your store responsive.
  • User friendliness themes with easy navigations, useful buttons, and neat arrangements are essential for your theme.
  • It MUST be SEO friendly.
  • Select the theme suitable for your business model.
  • Select a theme that is compatible with multiple browsers to reach more audiences.
  • A good color blend with your products and services!
  • With the advanced use of social media, a social media friendly theme is appreciated.
Proceeding to the steps to install a theme in Magento 2, check the below method:  

Methods to Install a Theme in Magento 2:

  1. Install Manually

    When you have a list of files in a zipped folder as a new theme, follow this method.
    1. Unzip the theme Unzip the archive of the theme and spot the two directories: app and pub.
    2. Upload the files
      1. Navigate to the root directory of your Magento 2 store
      2. Upload the folders into the root directory.
    3. Run the commands
      1. Connect the store via SSH.
      2. Navigate to the root directory
      3. Upgrade the setup with these commands: The success of an E-commerce store is achieved by many things and a theme is one of the prominent element. Hopefully, the above tutorial has helped you enough to install a theme in Magento 2! If not, feel free to post your doubts in comments section below and I’d be happy to solveThank You.
    4. Login to Admin panel
      1. Navigate to Content > Design > Configuration
      2. Select Edit the store theme.1_Design-Configuration
      3. Select the desired theme from the dropdown menu and your Save Configuration.

  2. Install via Composer

    When you have a theme as a composer package, follow this method.
    1. Purchase a theme from Magento Marketplace.
    2. Achieve the Composer name of the theme;
    3. Navigate to the root directory and enter the below command:
    4. Wait till dependencies are updated;
    5. Run the below commands: To verify that the theme is registered, follow the below steps:
      1. Login to Admin Panel and reload any of the backend pages after the theme is installed.
      2. Navigate to Content>Design>Themes
      3. Check if the theme is displayed on the right panel in the list of available themes.
The success of an E-commerce store is achieved by many things and a theme is one of the prominent element. Hopefully, the above tutorial has helped you enough to install a theme in Magento 2! If not, feel free to post your doubts in comments section below and I’d be happy to solve Thank You.]]>

How to Import Italian States in Magento

by | Nov 5, 2020 | Magento2

Magento 2 store owners do not get the default dropdown option that contains all the states of Italy. In online stores when forms are used, asking customers to type the name of their respective state contributes to poor user experience. On the other hand, if the developers have to write code for each registration form and include dropdown list, it is a time-consuming and tedious task. To give better user experience and easing the developer’s task, importing states to display in dropdown option is the best thing to implement. I have prepared an SQL script to import Italian states in Magento.

SQL Script to the Import Italian States in Magento:

That’s it. Feel free to use the above script to import Italian states in Magento 1 or Magento 2 development. Share this programmatic solution with the Italian store owners via social media. Buona Giornata. 😉 Thank you.]]>

How to Prevent Auto Logout When Uploading Zip File for Downloadable Product in Magento 1

by | Nov 5, 2020 | Magento2

prevent auto logout when uploading zip file for downloadable product in Magento 1. If you have recently upgraded your Magento 1 version, you might face this issue. While uploading the zip file for downloadable product type, you get the “uploading….” message but nothing happens. Eventually, you are returned to the admin login screen automatically. Resolve this issue using the below method:

Solution to prevent auto logout when uploading zip file for downloadable product in Magento 1:

Run the below query in database: That’s it. Any doubts about the solution can be mentioned in the Comments section below. I’d be happy to help. Also, do share the solution with Magento 1 store owners via social media. Thank you.]]>