AstroにおいてのSSR

SSGをメインとする場合

Astroは前提としてNext.jsでのSSGモードをメインとして採用しているフルスタックのフレームワークです。しかしながら部分的にSSRを実装することもできます。

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'hybrid',
});

outputを設定することでSSGとSSRを混ぜたサイトを構築することができます。
今回の場合であればoutputをhybridに設定することでサイト全体をSSGがメインとすることができます。

src/pages/randomnumber.astro

---
export const prerender = false;
---

この場合は追加でこのように設定することでこの部分だけSSRモードにすることができます。

SSRをメインとする場合

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'server',
});

SSRをメインでサイトを構築する場合はoutputをserverに設定します。
(Astroをnetlifyでデプロイする、動的にAPIを呼びだしてレンダリングなど)

src/pages/mypage.astro

---
export const prerender = true;
---

このように設定することでこの部分だけSSGモードにすることができます。

例えば事前に返す内容が決まっているブログやCMSなどを作成したい場合はその部分にこのコードを加えてあげましょう。

設定しないと下のような警告が出るのでそれに従えば大丈夫です。
事前に返す内容が決まっているブログやCMSなどにはこれを使います。

Add `export const prerender = true;` to prerender the page as static HTML during the build process.

参考記事