SSR을 통한 페이지 구현
import React from "react";
import { GetServerSideProps, NextPage } from "next";
import Head from "next/head";
type SSRProps = {
message: string;
};
const SSR: NextPage<SSRProps> = (props) => {
const { message } = props;
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico"></link>
</Head>
<main>
<p>
이 페이지는 서버 사이드 랜더링을 통해 접근 시에 서버에서 그려진
페이지입니다.
</p>
<p>{message}</p>
</main>
</div>
);
};
export const getServerSideProps: GetServerSideProps<SSRProps> = async (
context
) => {
const timestamp = new Date().toLocaleString();
const message = `${timestamp}에 이 페이지의 getServerProps가 실행됐습니다.`;
console.log(message);
return {
props: {
message,
},
};
};
export default SSR;
SSR에서는 getServerSideProps를 이용하여 정의합니다. SSR에서는 접근할 때마다 서버에서 페이지를 그리고, 그 결과를 클라이언트에서 표시함.
접근할 때마다 표시되는 내용이 변하기 때문에, 매번 서버가 getServerSideProps가 호출되고 페이자가 그려지는 것을 알수 있슴.
getServerSideProps 함수는 단일 인자인 context를 받습니다. 이 context 객체는 다양한 정보와 메서드를 포함하고 있으며, 다음과 같은 속성을 가지고 있습니다:
- context.params: 동적 라우팅에서 사용되는 경로 매개변수의 키-값 쌍을 포함합니다.
- context.query: 쿼리 문자열의 키-값 쌍을 포함합니다.
- context.req: HTTP 요청 객체입니다. (서버 측에서만 사용 가능)
- context.res: HTTP 응답 객체입니다. (서버 측에서만 사용 가능)
- context.preview: 프리뷰 모드인지 여부를 나타내는 부울 값입니다. (미리보기 모드에 대한 정보가 필요한 경우 사용)
ISR을 통한 페이지 구현
점진적 정적 재생성(ISR)은 SSG의 응용이라고 할 수 있음. 특징으로는 페이지 수명을 설정할 수 있고, 수명을 지난 페이지에 대해서는 최신 정보로 재생성을 시도하고, 정적 페이지를 전송하면서 정보를 업데이트할 수 있습니다.
import React from "react";
import { GetStaticPaths, NextPage, GetStaticProps } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
type ISRprops = {
message: string;
};
const ISR: NextPage<ISRprops> = (props) => {
const { message } = props;
const router = useRouter();
if (router.isFallback) {
return <div>loading...</div>;
}
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<p>이 페이지는 ISR을 통해 빌드 시 생성된 페이지입니다.</p>
<p>{message}</p>
</main>
</div>
);
};
export const getStaticProps: GetStaticProps<ISRprops> = async (context) => {
const timestamp = new Date().toLocaleString();
const message = `${timestamp}에 이 페이지의 getStaticProps가 실행됐습니다.`;
return {
props: {
message,
},
// 페이지의 유효시간
revalidate: 60,
};
};
export default ISR;
ISR에서 revalidate를 반환하는 getStaticProps를 사용. getStaticProps에서 revalidate를 반환하면 그 값이 유효 시간이 되며, 우효 기간이 지난 페이지는 재생성된다.
그외 에 다른점으로는
Link 와 image 있다.
간단하게 설명하면 a요소와 다르게 파일 등을 얻어 화면에 그리는게아니라, 클라이언트 사이드에서 새로운 페이지를 그린다. 새로운 페이지를 그리기 위해서 필요한 데이터는 미리 비동기 방식으로 얻스비다. 그덕분에 페이지를 재빨리 이동할 수 있습니다.
a요소 대신 Link를 사용하면 자식 컴포넌트에 onClik 콜백이 전달되어, 콜백이 호출되면 페이지를 이동한다. 그렇게 되면 router 객체에 push 매서드를 호출해서 페이지를 이동할 수 있게된다.
Image를 간단하게 설명하면, 해당 컴포넌트는 각각 사용자의 브라우저에 맞게 최적화를 제공해서, 일반 img 요소로 제공하는 파일의 크기보다 절반의 값으로 최적화 할 수 있습니다.
후기
대충 다시 기억되새기금 상기게가 되게끔 정리를 해봤습니다.
면접때 아는건데 잘 대답을 못해주면 곤란하니가 겸사겸사 정리를 했네요 ㅎㅎ
'React 실습 > Nextjs 실습' 카테고리의 다른 글
| [Next.js] Next.js 랜더링 방법 - SSG (0) | 2023.07.03 |
|---|---|
| [Next.js] 4장 - 코드 구성과 데이터 불러오기 (0) | 2023.05.07 |
