Server-Side Rendering Explained |

IT-блоги Server-Side Rendering Explained

DZone Web Dev 20 апреля 2021 г. Jennilyn Prerender


The world of web development has changed rapidly. Over the last fifteen years, web pages have evolved from simple HTML text to multimedia interactive experiences, elevating web development to art. That’s like a civilization going from stone houses to space exploration in a century. 

Two of the most significant advancements in web development during this period have been the adoption of JavaScript frameworks to build web pages and the field of Search Engine Optimization.

Ironically, JavaScript development and SEO are often at odds with each other. JavaScript makes websites fun and interesting to use, while SEO makes them available for people to find in the first place.

Server-side rendering (SSR) was created to make them both possible. Read on to learn about what SSR is, why you should care, and how you can use it for yourself.

What Is SSR?

Server-side rendering (SSR) is a method of loading your website’s JavaScript on your own server. When human users or search engine web crawlers like Googlebot request a page, the content reads as a static HTML page.

Historically, search engines have had difficulty crawling and indexing websites made using JavaScript rather than HTML.

Google indexes JavaScript-based web pages using a two-wave indexing system. When Googlebot first encounters your website, it crawls your pages and extracts all of their HTML, CSS, and links, typically within a few hours.

Google then puts the JavaScript content in a queue, rendering it when it has the resources. Sometimes that takes days or weeks. During that time, your web pages are not being indexed and, therefore, are not being found on Google. That’s a lot of traffic you’re missing out on. 

What’s worse, if your JavaScript pages aren’t able to be crawled and indexed properly, Google reads them as a blank screen and ranks them accordingly, which can be catastrophic to your website’s SEO health.

Google has claimed that Googlebot is able to crawl and index Javascript-based web pages just fine, but this has yet to be proven. Other search engines such as Bing, Yandex, and DuckDuckGo cannot crawl JavaScript at all.

Regardless of the search engine, JavaScript presents a problem because it needs additional processing power to crawl and index, thereby eating up more of your website’s allotted crawl budget.

SSR is designed for this problem. It renders JavaScript on your own servers rather than putting the burden on the user agent, making the content fast and easily accessible when requested.

What Is Client-Side Rendering and How Is It Different From Server-Side Rendering?

Client-Side Rendering (CSR) is the increasingly popular alternative to SSR. The difference between the two is similar to ordering a prepared meal kit from a service like Blue Apron or Green Chef, or buying all the ingredients and making the meal yourself. 

Client-side rendering loads a website’s JavaScript in the user’s browser, not the website’s server. It’s ordering the prepared meal kit.  

Websites built with front-end JavaScript frameworks such as Angular, React, and Vue all default to CSR. This is problematic from an SEO standpoint because when web crawlers encounter a page on your website, all they see is a blank screen. 

Server-side rendering, meanwhile, is the more traditional option; it’s buying the groceries and cooking the meal yourself. It loads your JavaScript content on your website’s server. 

SSR dates back to the time when JavaScript and PHP were primarily backend technologies, and Java was used simply to make HTML-based websites more interactive rather than building them from scratch. 

SSR converts your HTML files into information that’s readable for the user-end browser. Googlebot can see the basic HTML content on your web page without JavaScript in the way, while the user sees the fully-rendered page in all its glory. Your website is ranked properly on Google, and your user is treated to a web experience that’s a feast for the eyes and ears.

Advantages of Server-Side Rendering

We’ve already discussed some of the SEO benefits of server-side rendering: flawlessly crawled and indexed JavaScript pages, no more wasted crawl budgets or plummeting search rankings, no sluggish two-wave indexing process; just smooth, seamless indexation and the steady stream of Google traffic that comes with it.

SSR has even more advantages than the ones above. 

It optimizes web pages for social media, not just search engines. When someone shares your page on Facebook or Twitter, the post includes a preview of the page.

It comes with a number of performance benefits that improve your website’s UX. SSR pages have a much faster load time and a much faster first contentful paint because the content is available in the browser sooner. That means less time your user has to look at a loading screen. 

JavaScript is resource-heavy and code-intensive. Downloading it onto a browser using CSR contributes significantly to page weight. A single JavaScript file averages out to about 1MB, whereas web development best practice advises keeping the entire page under 5MB max. 

The performance enhancements that come with SSR also have their own SEO benefits.  

Google gives preferential search rankings to the sites with the fastest page load speed. Faster load times improve user metrics such as session duration and bounce rate; Google algorithms look at these metrics and give you an extra SEO boost.

Faster web pages. Happy search engines. Happy user.

Server-Side Rendering Disadvantages

If SSR is so much more technically well-optimized and SEO-friendly, why don’t all websites use it?

Turns out, using SSR for your website does come with some significant drawbacks. It’s expensive, difficult to implement, and requires a lot of manpower to set up. It also puts the burden of rendering your JavaScript content on your own servers, which will rack up your server maintenance costs.

Websites that use JavaScript frameworks need universal libraries to enable SSR; Angular requires Angular Universal, React and Vue need Next.JS. All of them require additional work from your engineering team, which costs you money.

SSR pages will have a higher TTFB latency and a slower time-to-interactive. Your user will see the content sooner, but if they click on something, nothing will happen. They’ll get frustrated and leave.

SSR is not a fix-all solution. You need to assess your website’s technical needs and challenges before putting it in place.

Источник: DZone Web Dev

Наш сайт является информационным посредником. Сообщить о нарушении авторских прав.

java javascript seo development react rendering vue googlebot

Читайте также

IBM открыл CodeNet для систем машинного обучения, транслирующих и проверяющих код

DevOps OpenNET 11 мая 2021 г. 21:28
Компания IBM представила инициативу CodeNet, нацеленную на предоставление исследователям набора данных, позволяющих экспериментировать с применением методов машинного обучения для создания трансляторов из одного языка программирования в другой, а так...... читать далее

Mock static methods with Mockito - Java Unit Testing

Разработка 11 мая 2021 г. 20:46
One of the most frustrating element when I am doing the Unit tests in Java is to not be able to mock static methods. Sure, during a long time we got PowerMock. But, since JUnit5, PowerMock wasn't compatible and we were unable to continue with it...... читать далее
java todayilearned

Разработка DZone Web Dev 11 мая 2021 г. 15:59

This is the third article of the series. The first article is about integrating Bing Maps with Angular and Spring Boot with Jpa. The second article is about adding a new shape to the map and storing it in the Spring Boot backend. This article is abou...... читать далее

java spring boot angular postgresql jpa typescript h2 database bing maps

Разработка 11 мая 2021 г. 15:22

Node.js backend development has become extremely popular among software developers. In order to keep up with modern technologies, it is necessary to know what is Node.js, what are the reasons to use it, where to hire developers, etc. Answers to these...... читать далее

DevOps DZone DevOps 11 мая 2021 г. 14:58

Introduction While building multiple apps, you will come across reusable code. This common code can be packaged, versioned, and hosted so that it can be reused within the organization.  Azure DevOps Artifacts is a service that is part of the Azu...... читать далее

devops azure devops azure artifacts

Разработка 11 мая 2021 г. 14:02

Find repo here: 1 Beginner Friendly / Educational I love programming and I also love teaching it to other persons, so the main goal of MovingPoint is to bring new motivate...... читать далее

Разработка 11 мая 2021 г. 13:28

I just completed 7000 (I have worked very hard to reach this small number. Nothing big but enough to carry the momentum forward 😉) subscribers on my YouTube Channel. If you are looking to learn programming, make sure to check out my You...... читать далее

Популярные темы

новости (401) javascript (383) ux (380) design (347) headline (300) python (286) devops (251) ubuntu (233) ux-design (225) tutorial (215) security (210) programming (206) новость (204) web dev (196) webdev (159) working in tech (152) seo (152) дайджесты вакансий от (150) статьи (143) ui (135) testing roundup (122) software testing (121) user-experience (116) css (113) java (113) react (109) дизайн (102) google (100) product-design (94) игровые проекты (90) beginners (88) ui-design (88) design-thinking (85) technology (83) php (82) productivity (81) прочее (80) primary (80) движки и конструкторы игр (78) api5 (76) технологии (76) cloud (76) job hunting (75) бизнес (73) windows 10 (73) docker (71) laravel (70) debian (68) bash programming (68) uncategorized (68) tutorials (67) hardware (67) android (66) news (60) мероприятия (60) linux mint (59) обучение (58) kubernetes (56) работа (56) linux (55) games (54) art (54) networking (53) ios (53) machine learning (53) angular (52) инструкции (52) español (51) web design and applications (50) ux-research (50) case-study (50) aws (50) covid-19 (50) разработчики (50) api (49) обзоры (49) cybersecurity (49) data (49) apple (49) chrome (48) engineering (48) html (48) inspiration (47) турбо-страницы (47) git (46) linux commands (46) job skills (46) web (46) home page stories (45) publication (45) typescript (45) dotnet (44) node (44) mobile (44) powershell (44) c++ (43) навыки алисы (43) tools (43) testing (41) mysql mariadb (41)