Proof of concept for headless WordPress using the wp-graphql plugin, apollo-client and next.js. Spent about 20 hours on this little hackathon.
- Displays WordPress pages
- Displays WordPress posts
- Displays the main navigation
- Has SSR caching
- Caches Graphql requests in the WP object cache
Headless WordPress using wp-graphql works fine, but it's not fast enough in all scenarios.
Even with a few caching layers the WordPress installation always loads the WP core, theme code and plugin code before serving data. These are the average load duration in each scenario:
- Serverside request uncached: 100ms
- Serverside request cached: 5ms (with lru-cache)
- Clientside request uncached: 400-800ms (with Redis Object cache)
- Clientsidee requests second visit: 5ms (with apollo-client cache)
My next approach for headless WordPress will either be with a static site builder like Gatsby.js or using the REST API with an express API between client and server that acts as caching layer.