如何優化 SSR？

優化 SSR (Server-Side Rendering) 的性能可以從多個角度入手，包括減少服務器負載、加快響應速度、優化資源加載等。以下是一些具體的優化策略：

1. 使用快取

HTTP 快取

利用 HTTP 快取頭，例如 Cache-Control，來控制瀏覽器和中間代理的快取行為。

export async function getServerSideProps(context) {
  context.res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');

  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

服務器端快取

在服務器端實現數據快取，可以使用內存快取（如 Redis、Memcached）來減少對後端數據源的頻繁請求。

2. 減少阻塞資源

分離 CSS 和 JavaScript

使用 Next.js 自帶的 CSS 和 JavaScript 分離機制，確保關鍵資源能夠快速加載和解析。

import Head from 'next/head';

const MyPage = ({ data }) => (
  <div>
    <Head>
      <link rel="stylesheet" href="/styles.css" />
    </Head>
    <h1>My Page</h1>
    <p>{data}</p>
  </div>
);

export default MyPage;

3. 最小化和合併資源

使用工具如 Webpack、Terser 等來最小化和合併 CSS 和 JavaScript 文件，減少文件大小和 HTTP 請求數量。

4. 延遲加載非關鍵資源

對非關鍵資源使用延遲加載技術，確保關鍵內容優先加載。

<script src="non-critical.js" defer></script>

5. 使用 CDN

將靜態資源（如圖片、CSS、JavaScript 文件）部署到 CDN，提高資源加載速度並減少服務器負載。

6. 預渲染和動態渲染結合

對於頻繁變化的頁面，可以結合使用 SSR 和增量靜態生成 (ISR)，將不常變化的內容預渲染，減少服務器壓力。