React + Next.jsで作る、SSR（サーバーサイドレンダリング）の基本【実装方法と最適化】

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

🛠 開発環境
Node.js 16.x

Next.js 12.x

React 18.x

• SSRとは？
  SSRは、サーバー側でHTMLを生成し、ブラウザに返す仕組みです。これにより、ページの初回表示速度が改善され、SEO対策にも有利になります。

1. Next.jsでSSRを有効にする方法
   Next.jsでは、getServerSidePropsという関数を使うことで簡単にSSRを実現できます。

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を簡単に実装できますが、最適化を考慮して運用することが重要です。