/nextjs-ssr-localcache-example

Proof-of-concept for next.js + server side XHR request caching to speed up page renders

Primary LanguageTypeScript

nextjs-ssr-localcache-example

This repository demonstrates the following proofs-of-concept:

  1. Server-side XHR request caching (via memcached) to speed up page renders
  2. Server-only modules isolation via import alias

Details

  1. Upon accessing the landing page (http://localhost:3000/), there are three pages that users can access:

    • /user: Makes XHR call to get user info, getInitialProps(), non-cached
    • /user-cached-ip: Makes XHR call to get user info, getInitialProps(), cached
    • /user-cached-ssp: Makes XHR call to get user info, getServerSideProps(), cached

  2. The XHR call to get user info is deliberately delayed to last at least 2 seconds long, in order to demonstrate the effect of caching the XHR call.

    • Since the /user page XHR call is not cached, the page load will always be at least 2 seconds long
    • As /user-cached-ip and /user-cached-ssp pages both use caching, subsequent page loads (after the first page load) will be very fast.

  3. Within the page links cluster, there is also a Clear User Data Cache button to clear out the cache (to invoke invalidated cache scenario)

Prerequisites

  • node
  • docker

Starting the project

  1. Install node dependencies: yarn
  2. Spin up memcached docker container: docker-compose up
  3. Spin up next.js instance: yarn dev
  4. Access landing page: http://localhost:3000/

Addendum

  • Connect to memcached instance: telnet localhost 11211
  • Verify server/client build contents: yarn analyze

Related resources