[Nextjs] SSR(Server Side Rendering)

Client Side Rendering

pages/user.js

import {useRouter} from "next/router";

const UserPage = () => {
    const router = useRouter();
    const {query} = router;
    const {name, age} = query;

    return (
        <div>
            <div>{name}</div>
            <div>{age}</div>
        </div>
    );
};

export default UserPage;

응답 html 확인

$ curl http://localhost:3000/user?name=tyler&age=35

<div id="__next">
    <div>
        <div></div>
        <div></div>
    </div>
</div>

Server Side Rendering

종류

• getInitialProps
  • 페이지 최초 로딩시에는 서버 사이드 렌더링을 수행한다.
  • 이후 페이지 라우팅시에는 클라이언트 사이드 렌더링을 수행한다.
  • nextjs 9.3 버전 이후부터는 사용 비권장. 아래 방식 사용을 권장.
• getStaticProps
  • 빌드 시점에 가져온 데이터로 json으로 저장하여 사용하는 방식.
  • 고정된 내용을 보여주는데 적합.
• getServerSideProps
  • 동적인 데이터를 보여줘야할 때 사용하는 서버 사이드 렌더링 방식.
  • 아래에서는 해당 방식으로 예제 설명.

pages/user.js

export async function getServerSideProps(context) {
    const {query} = context;

    const props = {
        name: query.name || null,
        age: query.age || null,
    };

    return {props};
}

const UserPage = ({name, age}) => {
    return (
        <div>
            <div>{name}</div>
            <div>{age}</div>
        </div>
    );
};

export default UserPage;

응답 html 확인

$ curl http://localhost:3000/user?name=tyler&age=35

<div id="__next">
    <div>
        <div>tyler</div>
        <div>35</div>
    </div>
</div>