NextJs (10) 取得遠端資料

發表於 分類於
Next中取得遠端資料

SSR 元件 (Server-Side Rendering)

*是指在伺服器上預先處理並生成 HTML，然後將完整的 HTML 發送到用戶端。
在 ssr 元件中取得遠端資料方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const { API, API_PATH } = process.env;
export default async function Products() {
  const res = await fetch(`${API}/v2/api/${API_PATH}/products/all`);
  const json = await res.json();
  const data = json.products;
  return (
    <>
      <div>
        產品列表
      </div>
      { data.map(product => {
        return (
          <div key={product.id}>
            <Link href={`/products/${product.id}`}>
              { product.title }
            </Link>
          </div>
        )
      })}
    </>   
  )
}