다음.제가 직접 만든 JS+ 프리렌더링입니다.
7473 단어 nextjsjavascriptnode
미리 렌더링
page.이것이 바로 다음 단계다.js 프레임워크는 클라이언트가 아닌 서버에서 HTML을 생성합니다.js 도서관.hydration 라고 명명합니다.정적 생성
build time-npm run build에서 생성되고 요청마다 다시 사용됩니다.즉, HTML이 이미 서버에 존재하므로 프레임에서 HTML을 생성할 필요가 없습니다.서버측 렌더링
우리는 정적 생성과 서버 쪽 렌더링 사이에서 무엇을 선택할 수 있습니까?
I recommend that is the data dependence . 페이지의 내용이 시간에 따라 바뀌지 않으면우리는 정적 생성을 사용해야 한다. 반대로 서버측에서 보여야 한다. 페이지의 내용 데이터는 시간의 추이에 따라 변화한다.데이터와 데이터의 정적 생성.
build 시간에 HTML을 생성할 수 있다.getStaticProps 정적 생성 데이터.async 및 명명getStaticProps을 사용하여 이 함수를 내보낸 페이지의 경우getStaticProps는 구축할 때 실행됩니다.props 속성에 데이터를 추출합니다.export default function ExamplePage({ props }) {
return ( ... );
}
export async function getStaticProps() {
const data = await fetch('...');
return {
props: data
}
}
getStaticProps 는 Server-side 하에서만 실행됩니다.이것은 이 함수가 client-side 에서 영원히 실행되지 않을 것이라는 것을 의미한다.브라우저에서 코드를 묶지 마십시오.client-side의 조회 데이터베이스에 영원히 접근하지 마십시오.그것은 server-side에서만 운행된다.getStaticPaths 함수를 사용하여 URL에서 동적 인자를 해석해야 하는 이유이다.export default function ExamplePage({ props }) {
return ( ... );
}
export async function getStaticPaths() {
return {
paths: [
{ params: { id: '1' } },
{ params: { id: '2' } }
],
fallback: true
};
}
export async function getStaticProps(context) {
const data = await fetch('...');
return {
props: { data }
}
}
서버측 렌더링
export async function getServerSideProps(context) {
return {
props: {
// props for your component
}
}
}
getServerSideProps는 모든 요청에서 호출되기 때문에 함수의 context 매개 변수는 항상 요청한 데이터에서 나온다. 이것은 모든 요청이fetch 데이터를 호출하고 time by time의 데이터가 변화한다는 것을 의미한다.getStaticProps.서버가 모든 요청의 결과를 계산하기 때문이다.클라이언트 렌더링.
client-side rendering.dashboard 페이지에 사용됩니다.SWR
private입니다.그들은 우리가 반드시 이런 방법을 써서 React hook의 다른 데이터를 얻어야 한다고 건의했다.Reference
이 문제에 관하여(다음.제가 직접 만든 JS+ 프리렌더링입니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/hte305/pre-rendering-on-my-own-2b05텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
