✨Pre-rendering 방법은 2가지로 나누어 볼 수 있다.
그리고 각 페이지 별로 어떤 방식으로 렌더링할지 선택할 수 있다.
build시점에 HTML생성되어 모든 접속자는 사이트 접속 시점에 HTML을 볼 수 있다. 사용자의 요청 전에 미리 페이지를 보여줄수있고 그래도 되는 상황이라면 이 방법을 선택하는 것이 좋다.
server-side방식으로 페이지를 미리 보여주려하는 상황에서는 async getStaticProps 함수를 사용해 가장 먼저 실행되도록해 필요한 데이터(data fetching or DB)를 받아온 후 렌더링할 컴포넌트에 prop으로 넘겨주도록 한다.
import { getSortedPostsData } from '../lib/posts'
export async function getStaticProps() {
const allPostsData = getSortedPostsData()
return {
props: {
allPostsData
}
}
}
export default function Home ({ allPostsData }) { ... }
만일, 페이지의 데이터가 빈번하게 변경되 최신 데이터를 보여주어야 하거나 사용자의 요청이 있어야 데이터가 변경되어야 하는 상황이라면, 아래의 서버사이드 렌더링(SSR) 또는 pre-rendering이 아닌 클라이언트 측의 자바스크립트로 최신데이터를 받아오도록 하는 방법(CSR)이 있다.
각 요청때마다 HTML 생성하는 방법
사용자가 페이지에 접속한 후 다른 페이지를 요청하면,
내부에서 만들어둔 HTML에 필요한 데이터를 요청 및 계산해와야 하며, 별도의 추가 구성없이 CDN에서 결과를 캐시할 수 없으므로 속도는 SSG보다 떨어진다. (TTFB-Time to first byte, HTTP요청 이후 처음 데이터가 도달하는 시간) 그렇지만 최신 요청에 대한 응답으로 항상 최신 데이터를 보여준다.
버
페이지 자체를 반환하는 것이기 때문에, 요청시마다 새로고침이 발생하며 서버에 새로운 페이지에 대해 요청하는 방식이다.
Client: GET/posts/1 --->>
<<--- <HTML>...</HTML> : Server
SSR에서 요청 시점에 데이터를 변경할 때 사용된다.
getStaticProp과 마찬가지로 비동기 함수로 작성되며 사용자 요청에 필요한 parameter는 context
로 받아올 수 있다.
export async function getServerSideProps(context) {
return {
props: {
// props for your component
}
}
}
데이터가 자주 업데이트 되거나 미리 보여져야할 이유가 없는 데이터들은 SSR 혹은 CSR 방식이 더 적합하다고 했다. 그럼 이 중에서도 SSR을 써야하는 상황, CSR을 쓰는게 좋은 상황은 어떻게 될까?