Pre-rendering
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.
기본적으로 Next.js는 모든 페이지를 사전 렌더링한다.
Next.js는 client 측의 JavaScript로 모든 작업을 수행하는 대신 모든 페이지의 HTML을 미리 만든다.
이러한 사전 렌더링은 SEO와 성능 측면에서 모두 나은 결과를 얻을 수 있다.
Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)
생성된 각각의 HTML은 페이지에 필요한 최소한의 JavaScript 코드와 연관되어 있다.
페이지가 브라우저에 의해 로드될 때 이 JavaScript 코드가 동작하여 페이지를 완전히 상호작용할 수 있도록 만드는데 이 과정을 hydration이라고 한다.
Two forms of Pre-rendering
Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.
- Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
- Server-side Rendering: The HTML is generated on each request.
Next.js의 사전 렌더링 방식은 Static Generation과 Server-side Rendering의 두 가지가 있다.
이 둘의 차이점은 페이지의 HTML이 언제 생성되는가 이다.
Static Generation은 HTML을 build time에 만든다. 그리고 요청이 있을 때마다 build time에 만들어둔 HTML을 재사용한다.
Server-side Rendering은 HTML 요청이 있을 때마다 만든다.
Importantly, Next.js lets you choose which pre-rendering form you'd like to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
You can also use Client-side Rendering along with Static Generation or Server-side Rendering. That means some parts of a page can be rendered entirely by client side JavaScript.
Next.js는 사전 렌더링 방식을 사용자가 선택할 수 있도록 한다.
따라서 대부분의 page를 그릴 때는 Static Generation을 사용하고 나머지 부분에 대해 Server-side Rendering을 사용하는 hybrid Next.js app을 만들 수도 있다.
물론 Client-side Rendering도 위 두 가지의 사전 렌더링 방식과 함께 쓰일 수 있다.
We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.
성능 상의 이유로 Server-side Rendering보다는 Static Generation을 사용하는 것을 권장한다.
정적으로 생성된 페이지들은 성능 향상을 위한 추가적인 설정 없이 CDN에 캐시될 수 있다.
그러나 몇 가지 경우에는 Server-side Rendering이 유일한 방법이 될 수도 있다.
📎관련 링크
