Static Page Generation with Angular and Scully

Static Sites Generation

With Angular and Scully.io

Natalia Venditto

Application Size

Performance Optimization with Ivy

~40%

~2%

~30%

SERVER

takes care of the logic, the routing, data fetching and logical operations

Server Rendering

Runtime

FAST

SLOW

First Paint

First Contentful Paint

Time to Interactive

Time to First Byte

FAST

FAST

CSR

Runtime

FAST

SLOW

First Paint

First Contentful Paint

Time to First Byte

Time to Interactive

CLIENT

takes care of the logic, the routing, data fetching and logical operations

FAST

FAST

SSR

SERVER-Side + CSR

FAST

SLOW

First Paint

First Contentful Paint

Time to First Byte

Time to Interactive

SERVER

takes care of the logic, the routing, data fetching and logical operations

FAST

FAST

Special infra/State Duplication

TranferState API

$ ng add @scullyio/init

MINIMUM REQUIREMENTS

Angular 8

Node v.10+

Buildtime

./dist/static

$ ng build && npm run scully

‘router`

‘render`

`file handler`

‘route discovery done`

`all done`

PLUGINS

$ npm run scully serve

./dist/static

SSG

Buildtime

FAST

RÁPIDO

SLOW

First Paint

First Contentful Paint

Time to First Byte

HTML Generation

Time to First Byte

Time to Interactive

COMPILER

takes care of the logic, the routing, data fetching and logical operations

FAST

FAST

FAST

Demo (sort of :P)

$ ng generate module docs --route=docs --module=app-routing

<h3>ScullyIo content</h3>
<hr>

<!-- This is where Scully will inject the static HTML -->
<scully-content></scully-content>
<hr>
<h4>End of content</h4>

import { ScullyConfig } from '@scullyio/scully';

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'doc-site',
  outDir: './dist/static',
  routes: {
    '/docs/:slug': {
      type: 'contentFolder',
      slug: {
        folder: './docs'
      },
    },
  }
};