Consuming The WordPress Posts Via The REST API

WordPress provides a REST API that has good online documentation that includes information such as type definitions and route information(WordPress, n.d.).

Fetching & Server Side Rendering

As the data is stored on an external storage system, the server hosting the WordPress application, the page can not be directly served with the data if it is rendered on the client. By rendering the page on the client using Reacts default rendering technique the user will have to wait for the data to be fetched, parsed and then rendered. 

A small subset of the post information is rendered for this page as the entire post is not required. To reduce the amount of fields returned from the REST API the ?_fields?= query is used, as shown below.

To avoid this issue the data for the blog index page, the page that renders the posts and their excerpts, is rendered on the server. The data fetching is handled by the server meaning that when the client receives the page all of the data fetching has already been done for them.

Each excerpt contained some additional text that needed removed before the text could be displayed. A custom regular expression was created to remove these sections of text.


Rendering A Blog By ID Using Incremental Static Regeneration

By using NextJs dynamic routing and NextJs Incremental Static Regeneration each blog post is rendered at build time, meaning the amount of data fetching by the application is reduced(NextJs and Vercel, n.d.). Each post is cached by the application and is periodically checked for new data. This allows the application to provide fast loading times for the blogs without having to query the server running WordPress every time a user wishes to access the blog. The following code displays how this feature is implemented:


The HTML provided by WordPress is used directly within the DOM, along with the stylesheet used by the WordPress theme. This ensures consistency across both the NextJs application and the blogs viewed directly via WordPress. 

This method of using dangerouslySetInnerHTML is not advised unless you have full control of the data source and can therefore trust the data being sent. As all posts are created by me I know there is no malicious code being sent into the content of the blog post, so this method is okay to use. This approach can be acceptable in certain circumstances. For example, one of the example projects provided by the NextJs team uses this approach to render HTML generated from Markdown files that the developer controls(Neutkens, Uesugi and Alvarez D, n.d.). 

The following provides some example screenshots of a post accessed using the NextJs project and the same post accessed using WordPress.

NextJs



WordPress




This post has outlined how posts are fetched and rendered within the NextJs application developed for this project. By using NextJs Incremental Static Regeneration the amount of times the WordPress server is queried is reduced, while improving the users experience by reducing load times and JavaScript bundle size. Consistency in styling is achieved by reusing the same stylesheet used by WordPress for the blog posts meaning the layout of posts previewed using Gutenberg can be expected to look the same across both applications.

References

Neutkens, T., Uesugi, S. and Alvarez D, L. (n.d.). next.js/examples/blog-starter/components/post-body.js. [online] GitHub. Available at: https://github.com/vercel/next.js/blob/canary/examples/blog-starter/components/post-body.js.

NextJs and Vercel (n.d.). Basic Features: Data Fetching | Next.js. [online] nextjs.org. Available at: https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration.

WordPress (n.d.). Posts | REST API Handbook. [online] WordPress Developer Resources. Available at: https://developer.wordpress.org/rest-api/reference/posts/.

Comments

Post a Comment

Popular posts from this blog

WordPress Modifying A Child Theme & Using The OpenWeatherMap API

Image
The modification of a WordPress child theme can be accomplished in multiple stages. For my child theme modification users can search the name of a city and are provided some current weather data from openweathermap. To accomplish this I used TypeScript to make my requests and perform DOM manipulation. Child Theme Creation & OpenWeatherMap API To create a child them, navigate to the directory where WordPress themes are stored. Create a new directory that uses a similar name to the parent them you wish to extend, however append the text "-child" to the end. This text does not do anything, however this is considered best practice (WordPress, n.d.). This directory requires several files in order to be operational. Firstly, a CSS file that contains a description of the theme is required. This should be named style.css and contain text similar to the following extract. The child theme will now be available for activation thro...
Read more

Creating A WordPress Post Using The REST API

Image
The created NextJs application allows for the creation of a new blog post using the WordPress REST API by sending a HTTP POST request to  /wp/v2/posts  using the schema defined on the WordPress developer website(WordPress, n.d.). A custom built page was created that contains a form for creating blog posts. This page can only be accessed if the user has a currently authenticated session.  The Create functional component reads the state of the login session by accessing the AuthContext using the useContext hook. More can be read about the implementation of the persistence of an authenticated session by  accessing this blog entry. Creating The Posts Content Users can provide a blog with a title, an excerpt and can create HTML content for the post within the Post Content textarea shown in the following image. Each form input on this page uses the useForm form validation hook that was created for performing real time, reactiv...
Read more