@trellisorg/ngrx-universal-rehydrate

Here's a Haiku for you:

SSR Is Hard
Why duplicate your app's state
Rehydrate Instead

This library will allow you to configure what slices of your NgRx State are transferred from Angular Universal to the client and loaded into your app's state at state init time.

Demo

Run

yarn nx run ngrx-universal-rehydrate-demo:serve-ssr
yarn nx serve ngrx-universal-rehydrate-demo-api

This will serve the demo project to show that the api call has it's data transferred from universal to the client. You can see this if you install the Redux DevTools in Chrome.

Installation

yarn add @trellisorg/ngrx-universal-rehydrate
Add the following to your AppModule's import

NgrxUniversalRehydrateBrowserModule.forRoot({})

forRoot takes a config object in the shape of:

export const enum MergeStrategy {
    OVERWRITE = 'overwrite',
    MERGE_OVER = 'mergeOver',
    MERGE_UNDER = 'mergeUnder',
}

export interface NgrxUniversalHydrateConfig {
    stores: string[] | undefined; // Defaults to `undefined`
    disableWarnings: boolean;  // Defaults to `false`
    mergeStrategy: MergeStrategy; // Defaults to `MergeStrategy.MERGE_OVER`
}

If stores is left empty or undefined then the entire store is transferred.

Import NgrxUniversalRehydrateServerModule into your apps AppServerModule

import { NgModule } from '@angular/core';
import {
    ServerModule,
    ServerTransferStateModule,
} from '@angular/platform-server';
import { NgrxUniversalRehydrateServerModule } from '@trellisorg/ngrx-universal-rehydrate/server';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';

@NgModule({
    imports: [
        AppModule,
        ServerModule,
        ServerTransferStateModule,
        NgrxUniversalRehydrateServerModule.forServer(),
    ],
    bootstrap: [AppComponent],
})
export class AppServerModule {}