Client Side vs. Server Side Rendering

1

What Is Server-Side Scripting?

• Server-side scripting is a method of programming for the web that runs software on the server rather than the browser or installed plugins to create dynamic web pages.

• Languages used for these tasks are normal programming languages which include Perl, PHP, JSP, Ruby, ColdFusion, and Python

2

What Is Client-Side Scripting?

• Client-side scripts are placed within an HTML document in the user’s web browser rather than the web server to allow greater interactivity in a document. For example – client-side scripting could check the user’s form for errors before submitting it

• Enables web pages to change content according to user input and other variables, including the time of day. Can also be stored in a separate file that is referenced to the documents that use it.

3

Client-Side vs. Server side

• Your content is visible to search engines like Google.

• Fast Initial Load. There's no "white page" while the browser downloads the rendering code and data and runs the code.

• It maintains the idea that pages are documents, and if you ask a server for a document by URL, you get back the text of the document rather than a program that generates that text using a complicated API.

Server Side Client Side

• Allows for more interactivity

• Fast on subsequent requests

• You can update the screen instantly without going to the server when the user clicks, rather than waiting a few hundred milliseconds

• SEO. Client-side rendering means that crawlers cannot index and rank the site/page.

Negatively impacts our valuable SEO traffic 4

Why You Should Care About SEO?

• In 2016, SEO accounted for X% of total XXXX Sales.• Sales through SEO increased by X% in 2016

5

SEO Performance Chart Goes Here (Removed for Confidentiality)

Client-Side and SEO (Example)

What Search Engines “See”

http://social.macys.com/health-and-wellness/

• Search engines can find the page but cannot read the content on the page.• They are getting better about understanding JavaScript, but aren’t quite there yet.

VS.

6

Client-Side and SEO

7

Handling JS Heavy Site

OR

Isomorphic Java Script

REF: https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/

8

The SEO recommendation is steadfast on either:

Why Isomorphic Java Script?

PerformanceInitial Page Load Speed

SEOCrawlable Pages

MaintainabilityReduce Code Duplication

9

Next Steps/ Conclusion

• Client-Side Rendering impacts SEO traffic and sales to the site.• Its proven (i.e. Active page example on MCOM) that

content rendered client-side is lost to SEO…if we value SEO, the content simply must come from the server

Summary

Next Steps/ Recommendation

• Determine if we want to move forward with Server Side or Isomorphic JS

10