Api Route (SSR)

소개

• 기본적으로 아스트로는 static (Static Site Generation) 모드로 동작한다.
• 예외적으로 프런트메터에 export const prerender = false; 를 선언하면 해당 페이지는 server (Server Side Rendering) 모드로 동작한다.
• output 을 server 로 설정했으면 모든 페이지가 SSR로 동작하므로 export const prerender = false; 지시어는 필요없다. 다만 특정 페이지를 정적으로 라우팅 하고 싶다면 export const prerender = true; 로 내보내면 된다.

.astro 파일에서의 SSR Route

---
export const prerender = false;
const date = new Date();
---
<div>{date}</div>

해당 페이지는 SSR 모드로 동작한다. 따라서 매번 요청할때마다 시간이 바뀐다.

.ts 파일에서의 API Route

export const prerender = false;

export async function GET(){
    return new Response(JSON.stringify(new Date().toString()),{
        status:200,
        headers:{
            "content-type":"application/json"
        }
    });  
} 

src/pages 하위의 .ts 파일

SSR 동적 API

import type { APIRoute } from "astro";

export const prerender = false; 

export const GET: APIRoute = ({ params, url }) => {
  const { id } = params; 
  const users = {'0':'user0', '1':'user1', '2':'user2'} ;
  const user = users[id as keyof typeof users];
  return new Response(JSON.stringify({
    userId: id,
    message: `사용자 ${user || 'none'}의 실시간 데이터입니다.`,
    time: new Date().toString(), 
    query: url.searchParams.toString(),
  }));
}

src/pages/[id].ts 구성 시

SSR 동적 페이지

---
export const prerender = false;
const { id } = Astro.params; // 동적 라우팅 [id] 값
const { searchParams } = Astro.url; // URL의 쿼리 스트링 객체
---
<h1>{id}</h1>
<p>{searchParams.get('name')}</p>

src/pages/[id].astro 구성 시 user?name=아무개 일때