最小構成

まず一番簡単な最小構成のサーバーサイド組成を説明する。 説明する順は、次のとおりだ。

1. 組成の説明
2. フラグメントの説明
3. 結果

サンプルコードは、こちら。

組成

team_composite/serve.js

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const port = process.env.PORT || 2000;
const inspireHost = process.env.INSPIRE_HOST || 'localhost:4000';
const productHost = process.env.PRODUCT_HOST || 'localhost:5000';
const searchHost = process.env.SEARCH_HOST || 'localhost:6000';

app.get('/',  async (req, res) => {
  const inspire = await (await fetch(`http://${inspireHost}`)).text();
  const product = await (await fetch(`http://${productHost}`)).text();
  const search = await (await fetch(`http://${searchHost}`)).text();
  res.send(`${inspire}<br>${product}<br>${search}`);
});

app.listen(port, () => {
  console.log(`Team Composite app listening at http://localhost:${port}`)
});

サーバーサイドでレンダリングする際、SEARCH_HOSTへ問い合わせた結果を使っている。

フラグメント

SEARCH_HOSTでは、次のようなサーバーサイドレンダリングをしている。

team_search/serve.js

const express = require('express')
const app = express()
const port = process.env.PORT || 6000;

app.get('/', (req, res) => {
  res.send('Team Search')
})

app.listen(port, () => {
  console.log(`Team Search app listening at http://localhost:${port}`)
})

これにより、Team Searchという文字列を返却している。

結果

その結果、次のような画面が表示される。