|
| 1 | +# Server-Side Rendering Cache |
| 2 | + |
| 3 | +## Introduction |
| 4 | + |
| 5 | +VueStorefront 2 - Magento 2 integrations use @vue-storefront/cache module that adds posibility to cache some server-side |
| 6 | +rendered pages. |
| 7 | + |
| 8 | +### What is cached |
| 9 | +The cached pages are: |
| 10 | + |
| 11 | +* Home page with the `Vhome` tag. |
| 12 | +* All CMS pages with the `V${page.identifier}` tag |
| 13 | +* Category page with the `Vcategory` tag and tags for products: `P${product.uid}` as well as categories `C${category.slug}` |
| 14 | +* Product page with the `Vproduct-${route.value.params.id}` tag and tags for the main product `P${product.uid}` as well as categories `C${cat.id}` |
| 15 | + |
| 16 | +## Invalidating tags |
| 17 | + |
| 18 | +To invalidate a tag and remove pages associated with that tag, use the [Invalidation endpoint](https://docs.vuestorefront.io/v2/performance/ssr-cache.html#invalidating-tags). |
| 19 | + |
| 20 | +Go to the route configured in the `.env` file under the `REDIS__CACHE_INVALIDATE_KEY` key with two query parameters: |
| 21 | +* `key` — string matching the `REDIS__CACHE_INVALIDATE_KEY` key in the `.env` file. |
| 22 | +* `tags` — a comma-separated list of tags for invalidation. |
| 23 | + |
| 24 | +Assuming that you are running the application locally, the `REDIS__CACHE_INVALIDATE_URL` key is equal to `/cache-invalidate,` and the `REDIS__CACHE_INVALIDATE_KEY` key is equal to `secret_key`, and you want to invalidate the `Vhome` tag, the full URL will look like this: |
| 25 | + |
| 26 | +## How to cache other pages |
| 27 | + |
| 28 | +We added caching only to the most visited pages. However, you can cache other pages as well, including custom ones. You can find detailed instructions on how to use cache on the [SSR Cache](https://docs.vuestorefront.io/v2/performance/ssr-cache.html) and [Redis cache](https://docs.vuestorefront.io/v2/integrations/redis-cache.html) pages. |
| 29 | + |
| 30 | +:::tip |
| 31 | +You don't need to add any additional packages to cache more pages — just add or modify tags in components. |
| 32 | +::: |
| 33 | + |
| 34 | +## Cache drivers |
| 35 | + |
| 36 | +@vue-storefront/cache module is open source and provided Out Of The Box by Magento 2 integration. |
| 37 | +To set up caching in your store, you must install and configure a cache driver. |
| 38 | +You can use our enterprise `@vsf-enterprise/redis-cache` module, or build your cache driver. |
| 39 | + |
| 40 | +### Redis cache (enterprise) |
| 41 | +Once you have access to the [Vue Storefront npm registry](https://docs.vuestorefront.io/v2/general/enterprise.htm), |
| 42 | +you can install the Redis cache driver by running this command in a console: |
| 43 | + |
| 44 | +``yarn add @vsf-enterprise/redis-cache`` |
| 45 | + |
| 46 | + |
| 47 | +#### redis cache configuration |
| 48 | + |
| 49 | +Once you have the Redis driver installed, you need to add the Redis configuration to your project's `.env` file. |
| 50 | + |
| 51 | +``` |
| 52 | +.env |
| 53 | +REDIS__HOST=127.0.0.1 |
| 54 | +REDIS__PORT=6379 |
| 55 | +REDIS_PASSWORD= |
| 56 | +REDIS__KEY_PREFIX= |
| 57 | +REDIS__CACHE_INVALIDATE_URL=/cache-invalidate |
| 58 | +REDIS__ENABLED=false |
| 59 | +``` |
| 60 | + |
| 61 | +Then you have to update `nuxt.config.js file` and add this to the `modules` object: |
| 62 | + |
| 63 | +```javascript |
| 64 | +['@vue-storefront/cache/nuxt', { |
| 65 | + enabled: process.env.REDIS__ENABLED, |
| 66 | + invalidation: { |
| 67 | + endpoint: process.env.REDIS__CACHE_INVALIDATE_URL, |
| 68 | + key: process.env.REDIS__CACHE_INVALIDATE_KEY, |
| 69 | + handlers: [ |
| 70 | + '@vue-storefront/cache/defaultHandler', |
| 71 | + ], |
| 72 | + }, |
| 73 | + driver: [ |
| 74 | + '@vsf-enterprise/redis-cache', |
| 75 | + { |
| 76 | + // docs: https://github.com/luin/ioredis/blob/master/API.md#new-redisport-host-options |
| 77 | + redis: { |
| 78 | + keyPrefix: process.env.REDIS__KEY_PREFIX, |
| 79 | + host: process.env.REDIS__HOST, |
| 80 | + port: process.env.REDIS__PORT, |
| 81 | + }, |
| 82 | + }, |
| 83 | + ], |
| 84 | +}], |
| 85 | +``` |
| 86 | + |
| 87 | +## Useful links |
| 88 | + |
| 89 | +- https://docs.vuestorefront.io/v2/performance/ssr-cache.html |
| 90 | +- https://docs.vuestorefront.io/v2/integrations/redis-cache.html |
| 91 | +- https://docs.vuestorefront.io/v2/integrate/cache-driver.html |
0 commit comments