目的
Reactを使ってシングルページアプリケーション（SPA）を作ってきたけれど、SEOを意識したサイト構築をしたい、という方向けに、Next.jsを使ってSSR（サーバーサイドレンダリング）を実装する方法を解説します。

🛠 開発環境
Node.js 16.x

Next.js 12.x

React 18.x

export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();

return { props: { data } };
}

const Page = ({ data }) => {
return

{JSON.stringify(data)}

;
};
2. SSRの最適化
SSRを実装した後は、パフォーマンスやSEOを改善するために、キャッシュの利用やLazy Loading（遅延読み込み）を活用することが大切です。

-まとめ
Next.jsを使えば、SSRを簡単に実装できますが、最適化を考慮して運用することが重要です。