Why SSR for SPA Sites SEO Friendly

Single-page application (SPA) development using frameworks like React, Angular, and Vue has become highly popular in recent years. This approach offers very fast rendering, preventing the “white screen” effect during page transitions, and can provide services almost indistinguishable from native apps when developing web applications.

However, this approach has a drawback: it’s not inherently search engine optimization (SEO) friendly. While Google’s search bots now detect and support SEO in SPAs without specific actions, other search engines haven’t yet implemented this feature.

This page explores several methods to address this issue.

Reasons for SSR in SPAs

The official Angular documentation categorizes these reasons into three points:

1. SEO Considerations: Search engine optimization is crucial for increasing visibility on search engines.
2. Performance Enhancement: Improving performance on mobile and low-power devices.
3. FCP (First-Contentful Paint) Optimization: Employing techniques to display the initial page content quickly.

Reference: Angular Universal

SEO Solutions for SPAs

1. Hash-based URL or Search Engine Keyword Replacement: Create URLs based on hashes or replace them with search engine-friendly keywords.
   • Example: http://url.com/#!/page. For Google, #! is recognized as _escaped_fragment_=, so it can be created as http://url.com/_escaped_fragment_=/page.

The disadvantage of this solution is that each search engine may have different methods, making it impossible to consider all cases.

1. Meteor with User-Agent Request Handling: Use Meteor and handle requests based on the user-agent. This approach has not been thoroughly tested, so I’ve attached a link to a well-organized site for reference.

Reference: WebFrameworks.kr - Proper SEO Handling

1. Leveraging SSR Functionality in SPAs: Generate the application statically on the server and bootstrap it to the client. This approach allows the server to handle requests, making it SEO-friendly while delivering static values to the client, enabling faster page rendering than traditional SSR methods.

Reference Sites

• Learn how Angular solves these issues now.