6804039e94
* npx create → npm init * Fix inconsistent instructions * Update amp-first * Update with-graphql-react * with-firebase-cloud-messaging * Update with-higher-order-component * change create-next-app url * Update create-next-app instruction * Update instructions to use npm instead of npx * Move "the idea behind the example" to top * Rename * Rename * Update contributing.md with a README template |
||
|---|---|---|
| .. | ||
| docker/varnish | ||
| src | ||
| .babelrc | ||
| .gitignore | ||
| docker-compose.yml | ||
| Dockerfile | ||
| package.json | ||
| README.md | ||
React ESI example
React Server Side rendering is very costly and takes a lot of server's CPU power for that. One of the best solutions for this problem is cache fragments of rendered pages, each fragment corresponding to a component subtree. This example shows how to leverage React ESI and the Varnish HTTP accelerator to improve dramatically the performance of an app.
The example (and the underlying lib) can work with any ESI implementation, including Akamai, Fastly and Cloudflare Workers.
Example app with prefetching pages
How to use
Using create-next-app
Execute create-next-app with npm or Yarn to bootstrap the example:
npm init next-app --example with-react-esi with-react-esi-app
# or
yarn create next-app --example with-react-esi with-react-esi-app
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-react-esi
cd with-react-esi
Starting the Varnish cache server
A Docker setup containing Varnish with the appropriate config and Node is provided. Run the following command to start the project:
docker-compose up