A few months ago we embarked on an adventure to completely redevelop the Drewberry site using fresh new designs, whilst maintaining our 1,000+ highly ranking WordPress pages intact.
We researched a lot, trying to figure out the best approach, and we found out that most online tutorials attempted to give you a crash course on React and WordPress, ignoring important aspects of SEO such as being able to work with Server Side Rendering (SSR) pages.
I’m not here to do that. Instead, I would like to give you a practical example and quickly point you in the right direction.
I will however make a few assumptions:
I’ll go ahead and assume SEO is a concern which really, it should be! Don’t be fooled by articles out there saying Google is clever enough to deal with Javascript-only pages; whilst it’s true to some extent, you must ensure the content is available, even if JS is not present.
To achieve that I’ll make yet another recommendation, Razzle.
Razzle is the closest thing you will get from the great experience it is Create React App, and at the same time enabling SSR.
Before we set it up, let’s make sure we have a WordPress API we can connect to.
Using the WordPress Rest API you should be able to get full pages in the JSON format.
However, most sites nowadays are not just a plain WordPress installation, and will include some sort of plugin, and at times even custom data processing.
Well, the good news is the WordPress Rest API is extendable and we’ve created a custom plugin — clone / download it using this link.
Place the contents inside of a folder of your preference under your plugins directory, then edit the content generator file.
As an optional step, you can change the name Drewberry to something more suitable to your company, but please bear in mind I’ll carry on referring to Drewberry in the api path in this tutorial:
Note the file ContentGenerator.php is where all the magic happens. From here you can transform your content response in any way you like, extend it using new functions, integrate with with some other API — the world is your oyster.
Once your plugin is enabled, you should be able get get an API response for it. In my example, I created one with the slug /news/this-is-a-test and I navigated to it: /wp-json/drewberry/v1/get-by-slug?slug=/news/this-is-a-test
Your resulting page is something like:
You are now ready to serve this content to our React front end.
We now get back to our React Razzle application, and we’ve created a quick example, which will connect to the WordPress back end we’ve prepared earlier, clone / download using this link.
Modify the file config file below, so the WP_END_POINT matches yours:
From your terminal run:
npm install && npm start
Navigate to: http://localhost:3000/news/this-is-a-test
You should be able to load a basic page, containing the text contents of your post.
This means you now have a working copy of a basic SSR React Application, connected to a WordPress end point.
Now that you have a very basic SSR React integration with WordPress running, you should head out to Razzle’s git hub, and learn everything you need to take your application to a production ready state.
From our WordPress API plugin, you should now create any actions, filters, and really any data processing required.
The reality is it’s actually pretty simple nowadays to get started with a React SSR site with WordPress, and you can then make your implementation as a simple or as complex as you may need it.
Hope this article has been useful to you.
Our goal is simple: to improve our clients’ financial wellbeing.
We help our clients take control of their finances by building lasting relationships where we support them to make informed decisions.
We provide financial advice services to individuals and businesses throughout the UK. Whether it’s setting up personal insurance to protect your lifestyle, managing your pensions, investments and other assets to improve your financial future or setting up employee benefits for a company, we’re here to help.
Drewberry™ uses cookies to offer you the best experience online. By continuing to use our website you agree to the use of cookies including for ad personalization.
If you would like to know more about cookies and how to manage them please view our privacy & cookie policy.
