search

ryelle / Foxhound

A text-focused blog theme for WordPress (in React)
https://themes.redradar.net/foxhound
350 stars 39 forks source link

SPA challenges #67

Closed cr101 closed 7 years ago

cr101 commented 7 years ago

Hi,

Does your project currently overcome any of the below challenges of building a theme as a single page application?

ryelle commented 7 years ago

Search Engine Optimisation (SEO)

I have to admit I haven't really tested this. Google claims to run javascript on your site, so it should correctly crawl a single page app. If you use Jetpack (or presumably Yoast, or another SEO plugin) with Foxhound, the open graph tags are added to the header of your site on the initial page load. So you can paste a URL into, for example, the facebook debugger and see the correct open graph data for the page. These do not update on page navigation, but for things like social embeds, you only need that initial page's data.

Browser history

This works just like a normal WordPress install thanks to react-router's browserHistory functionality.

Analytics

I haven't added this in Foxhound, but Google Analytics has a javascript library, so someone could add code to fire a GA event when the page loads, or when a user does an action. I would probably add that... maybe as a routerMiddleware, or as a component like DocumentMeta or BodyClass

Speed of initial load

The data for the current page is pre-loaded in a JSON object, which is injected into the page on the server-side (see load-data.php). This way the page isn't relying on that initial API call before it can show data. The API is called, though, in case any data has possibly changed between server & client rendering (this is probably very unlikely, but it was easier to leave the API call in, rather than trying to create a conditional).

cr101 commented 7 years ago

This article discusses a pretty interesting concept of building a WP theme using regular server-side rendered WordPress pages and creating only parts of the site using AngularJS/ReactJS in order to get the full benefits of SEO.