Share
There are two concepts that web developers need to know about: Client Side Rendering and Server Side Rendering when optimizing standard SEO Websites. SEO Standard website optimization is the process of increasing the quality and traffic of the website by increasing the visibility of the website or webpage to users on search engines such as Google, Bing, Yahoo,... If your website has unique content but it is not found and enjoyed by users, it is a waste.
Server Side Rendering (SSR) is the traditional rendering method.
Basically, all the resources on your page are stored on the server. When the requested page is accessed, the server returns the HTML page to display on the browser, JS and CSS are also downloaded and the final page content will show to the user.
Client Side Rendering (CSR) is a newer method of rendering web pages, for this method JS is implemented on the browser side through the Javascript framework.
The rendering process instead of being on the server as the Server Side Rendering, it renders on the browser. When a user requests access to a website, the browser receives raw data from the server and assembles those data to show it to the end user.
Mechanism of operation of Client Side Rendering
There is a metaphor that describes the difference between SSR and CSR, which is:
"With Server Side Rendering, whenever you want to see a new website, you have to go out and get it, which is similar to driving to the supermarket every time you want something to eat. With Client Side Rendering, you go to the supermarket once and spend 45 minutes walking around to buy a range of food for the month. Then whenever you want to eat, you just open the refrigerator. " - Adam Zerner
A website that applies Server Side Rendering can be displayed a little faster when it first visits the site, which is quite understandable as it does not require round trips to the server. However, performance depends on other factors. Influencing factors are mentioned as:
- User's internet speed making the requests
- The number of users visiting the site at a certain time
- The real location of the server
- How pages are optimized for speed
All of these factors can affect the user experience. Because every time a user sends an interaction request, a connection is sent to the server and the server repeats the same rendering steps.
A website that applies Client Side Rendering will show up slower on the first visit because it makes more round trips to the server. However, once these requirements are completed, CSR provides a quick experience through the JS Framework.
Client Side Rendering is said to be a perfect option to enhance the user experience, reducing the burden on the server when the user volume is overloaded. But for Client Side Rendering, HTML for indexing is only displayed when Javascript is fully displayed on the client side.
Therefore, with the indexing mechanism that Google is currently using, it can take from a few hours to a week before content can be crawled, indexed, and started ranking in search results.
For Server Side Rendering, all HTML content is in the source code, which means that search engines can request, collect and index information instantly, leading to faster appearances and rankings in search results.
Web designer programmers who both want to build a website that integrates SEO optimization capabilities such as Server Side Rendering, and want to enhance user experience with Client Side Rendering, there are two solutions offered:
Basically, this mechanism includes listening and sending a pure HTML snapshot to the search engine's bot when it requests your page. This ensures that users can still enjoy the fast speed provided by CSR while providing search engines with the HTML content needed to index and rank your pages.
Recommended by Google, with this option, in the first loading of the page, the view of the page will be rendered on the server, similar to traditional websites, and then the server sends the rendered view in HTML format to the client. Therefore, the client can render the view immediately. Then the entire SPA (Single page application) is loaded under the background, and subsequent actions are processed on the client side.
Since Isomorphic rendering works on both the server side and the client side, it can bring countless benefits to users. There are currently several Javascript frameworks that support Isomorphic rendering such as Next.js cho ReactJs, Nuxt.js cho VueJs, and Angular Universal for Angular. These frameworks make building Isomorphic websites faster, easier, and more convenient for people who are familiar with Vuejs, ReactJs or Angular.
E-commerce has been a leading trend in the economy in recent years. Therefore, building websites that meet SEO standards is extremely important. Not only good content and quality products but meeting the standards of search engines to bring users to your site is also a necessity.
If you are the one who decides which technology to choose when you start building your website, then hopefully through this article, you have the answer for yourself.
With experience in building e-commerce websites, the homepage serves marketing purposes for many businesses, Rabiloo's skilled and enthusiastic team of programmers is looking forward to working with you.
Contact us to deploy your application!
For more articles about frameworks, programming languages, technology, and business, visit Rabiloo's Blogs.
Share
