CODEWITHSUNDEEP
angularjsreactjswordpress
Aman Naithani
Aman Naithani

Reputation: 47

ReactJs and AngularJs taking too much time as compared with default wordpress

I am a wordpress developer, I am planning to use angular or reactjs with wordpress theme. I followed couple of articles and after implementation checked the performance on webserver and observe that default wordpress is way too much faster as compared with angularjs or reactjs. I can't shake the felling that something is wrong with my code. It will be very helpful if anyone can guide me to the right direction. I am posting the code that I have used so far.

ReactJs

 componentDidMount(){
    return fetch('http://www.websitename.com/wp-json/wp/v2/posts/?per_page=100')
.then((response) => response.json())
.then((responsejson) => {
    this.setState({data: responsejson});
})
.catch((error)=>{
    console.error(error);
});
}
 render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 ClassName="App-title">
        <div class="row" id="overview"></div>
        <div class="row" >
        {this.state.data.map((item, i) => ( 


        <div class="col-md-4" key={i}>
    <div class="thumbnail">
<a href="{item.slug}"><h3 class="ng-binding"> {item.title.rendered}</h3></a>
      <a href={item.slug}>
<img src={item.featured_image} />

      </a>
      <div class="caption">
{item.excerpt.rendered}
        </div>
    </div>
  </div>


        ) )}

</div>
        React Testing
        </h1>
      </header>
    </div>
  );
}

AngularJs

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
    url : "http://www.websitename.com/wp-json/wp/v2/posts?per_page=100"
  }).then(function mySuccess(response) {
      $scope.myWelcome = response.data;
    }, function myError(response) {
      $scope.myWelcome = response.statusText;
  });
});
</script>

for loading 100 posts per page. AngularJs took approx 40 secs, reactJs took more than 1.5 mins and wordpress default wp_query took 15 secs.

Upvotes: 0

Views: 104

Answers (1)

tmdesigned
tmdesigned

Reputation: 2254

A lightweight React or Angular application is likely not taking 40 seconds or 1.5 minutes to load, or to render. I suspect what you are seeing is the network requests for those resources taking that long.

In the Network tab of your inspector, have a look at the AJAX requests you are making for those posts (the raw JSON value). It should give you a total time spent loading, and that is likely where you are seeing your delay.

Here's the thing though. You cannot have Angular, React, or any other frontend library access the WordPress posts without some backend code fetching it. In the case of the WordPress API (which your URL shows you are using) -- that backend code is...wait for it...WordPress!

In other words, when you access the API, WordPress itself loads. It is designed to be a slimmed down WordPress, but it still goes through a loading cycle and then runs the same database query as on the frontend of the site.

So if, for instance, you have a plugin on your site that gets loaded and takes 30 seconds to finish, that will slow you down. It could literally be hundreds of things, and we can't see your entire WordPress installation to debug it.

You've specified to load 100 posts in your query, which is a bit heavy. Are you sure you're comparing apples to apples? In WordPress, are you loading 100 posts and their full content, like the /posts endpoint does in the API?

What I would suggest is doing a fresh install of WordPresss and seeing what the times are. If they are fast, slowly start adding the code (i.e. theme, plugins, posts, etc.) you have on your real site, and pay attention to when it gets slow.

For the sake of reference, I power my frontend WordPress site with Vue (a similar framework) and the WordPress API, and my posts load in well under a second. So it can be done, you just need to figure out your bottleneck.

Upvotes: 1

Related Questions