3998805b2e
Hello, I have been using next.js for a while in a bunch of projects, so first for all thanks for all the vibrant effort around the project 🖤. Always I see the server side next.js approach as an advantage, but also a weakness for the extra resources you need to have, specially comparing how cheap is a client side app. In order to do my things cheaper, I started using the SSR pattern you suggested in your examples, so useful! It saves time and resources. However, it was *too simple*. In a real production scenario, you need a bit more, specially related with send the right response headers to keep the rest of external network agent updated of your cache state. I started a tiny script code for doing that; basically, I copy/paste it on my ssr projects. Now, after a time, I think it's worth it publish it as [cacheable-response](https://github.com/Kikobeats/cacheable-response) module. The PR is for adding the module leverage into the next.js ssr example. It's doing the same, plus: - be possible use a multi storage cache (memory by default; mongodb, redis, mysql, supported). - sending `cache-control` response headers. - sending `X-Cache-Expired-At`, just a humanize way to see the expiration time. - support for forcing invalidation via `force=true` query parameter. I hope you like it 🙂 |
||
|---|---|---|
| .. | ||
| pages | ||
| package.json | ||
| README.md | ||
| server.js | ||
Example app where it caches SSR'ed pages in the memory
How to use
Using create-next-app
Execute create-next-app with Yarn or npx to bootstrap the example:
npx create-next-app --example ssr-caching ssr-caching-app
# or
yarn create next-app --example ssr-caching ssr-caching-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/ssr-caching
cd ssr-caching
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with now (download)
now
The idea behind the 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 already rendered pages. That's what this example demonstrate.
This app uses Next's custom server and routing mode. It also uses express to handle routing and page serving.
Alternatively, see the example using React ESI.