[Next.js] - Sever Side Rendering

SSR - Server Side Rendering

---

• pre-render at request-time

• 매 요청마다 HTML페이지가 생성된다

• personalized data & SEO

getServerSideProps

---

export async function getServerSideProps() {
  const response = await fetch("http://localhost:4000/news");
  const data = (await response.json()) as ArticleInterface;

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

• getStaticProps 와 동일한 방식의 함수 구조

• 서버에서만 실행되는 함수 : 브라우저로 전송되는 JS Bundle에 존재할 수 없음

• 서버에서 주로 실행되는 함수는 이론상 getServerSideProps 내부에서 구현 가능

• Next.js 페이지에서만 구현가능한 함수: 일반 컴포넌트에선 선언 불가

SSR with Dynamic Parameter

---

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { category } = ctx.params as IParams;
  const response = await fetch(`http://localhost:4000/news?category=sports`);

  const data = await response.json();

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

📍 ctx : getServerSideProps context 에서 더 공부해볼 내용들

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { params, req, res, query } = ctx.params as IParams;
  ...

• request

• response

• params

• query