ngx-isr

1. Install npm package

npm install ngx-isr

Make sure you have Angular Universal in your app.

1. Initialize ISRHandler inside server.ts

const isr = new ISRHandler({
  indexHtml,
  invalidateSecretToken: 'MY_TOKEN', // replace with env secret key ex. process.env.REVALIDATE_SECRET_TOKEN
  enableLogging: !environment.production
});

1. Add invalidation url handler

server.use(express.json());
server.post("/api/invalidate", async (req, res) => await isr.invalidate(req, res));

1. Replace Angular default server side rendering with ISR rendering

server.get('*',
  (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  }
);

server.get('*',
  // Serve page if it exists in cache
  async (req, res, next) => await isr.serveFromCache(req, res, next),
  // Server side render the page and add to cache if needed
  async (req, res, next) => await isr.render(req, res, next),
);

server.get('*',
  ...
    async (req, res, next) => await isr.render(req, res, next, {
      providers: [
        { provide: APP_BASE_HREF, useValue: req.baseUrl }, // <-- Needs to be provided when passing providers
        { provide: CUSTOM_TOKEN, useValue: 'Hello from ISR' },
        CustomService
      ]
    }),
);

server.get('*',
  // Serve page if it exists in cache
  async (req, res, next) => await isr.serveFromCache(req, res, next, {
    modifyCachedHtml: (req, cachedHtml) => {
        return `${cachedHtml}<!-- Hello, I'm a modification to the original cache! -->`;
    }
  }),
  // Server side render the page and add to cache if needed
  async (req, res, next) => await isr.render(req, res, next, {
    modifyGeneratedHtml: (req, html) => {
      return `${html}<!-- Hello, I'm modifying the generatedHtml before caching it! -->`
    }
  }),
);

1. Add revalidate key in route data

{
  path: "example",
  component: ExampleComponent,
  data: { revalidate: 5 },
}

NOTE: Routes that don't have revalidate key in data won't be handled by ISR. They will fallback to Angular default server side rendering pipeline.

1. Add NgxIsrModule in AppServerModule imports

import { NgxIsrModule } from 'ngx-isr'; // <-- Import module from library

@NgModule({
  imports: [
    ...
    NgxIsrModule.forRoot()  // <-- Use it in module imports
  ]
})
export class AppServerModule {}

git clone https://github.com/eneajaho/ngx-isr.git
npm install
npm run dev:ssr

1. Disable Javascript (in order to not load Angular after the page loads)
2. Navigate to different pages and check how the cache gets regenerated in terminal logs

• Explanation video (w/o voice)

const routes: Routes = [
  {
    path: "one",
    component: PageOneComponent,
  },
  {
    path: "two",
    component: PageTwoComponent,
    data: { revalidate: 5 },
  },
  {
    path: "three",
    component: PageThreeComponent,
    data: { revalidate: 0 },
  },
];

• Path /one won't be cached at all, and everytime it is requested it will be server-rendered and then will be served to the user.

• Path /two on the first request will be server-rendered and then will be cached. On the second request to it, the user will be served the cache that we got on the first request.

• Path /three after the first request that is server-rendered, the page will be added to cache and the cache will never be deleted automatically as in path /two. So after the first request, all the other ones will come from the cache.

Changelog

• Version 0.5.0

await isr.invalidate(req, res)

```ts
{
  token: string; // The secren token 
  urlsToInvalidate: string[]; // The urls to invalidate ex. ['/one', '/two']
}
```

• Version 0.4.0

* chore: Updated the project to v15
* feat: Added server context provider
* feat: Added RedisCacheHandler class usage in the demo app (experimental)
* chore: Started to convert the demo app in a documentation page for the library