เราไปดูวิธีการทำ Server-side rendering (SSR) กัน

ปกติ angular ที่เขียนกันจะทำงานฝั่ง client แต่เราสามารถให้ angular ทำงานฝั่ง server เพื่อให้ server render ออกมาได้

ส่วนเหตุผลในการทำนั้น จะมีหลัก ๆ อยู่ 3 เหตุผลด้วยกัน คือ

1. เพื่อทำ search engine optimization (SEO)
2. เพื่อปรับปรุงประสิทธิภาพในอุปกรณ์เคลื่อนที่และอุปกรณ์ที่ใช้พลังงานต่ำ
3. เพื่อให้หน้าแรกแสดงได้เร็วขึ้น first-contentful paint (FCP)

ตัวอย่างโค้ด

ในการทำ เราจะใช้ Angular Universal tool ในการทำ

ใน server.ts

import {ngExpressEngine} from '@nguniversal/express-engine';
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import {join} from 'path';

const PORT = 4000;
const app = express();
const distFolder = join(process.cwd(), 'dist/browser');
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', distFolder);

app.get('*.*', express.static(distFolder, {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', {req});
});

app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

ใน main.server.ts จะได้

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';

ส่วนใน app.server.module.ts จะได้ประมาณนี้

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

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

นี่เป็นเพียงตัวอย่างแบบง่าย ๆ เท่านั้น