rsnext/docs/advanced-features/automatic-static-optimization.md

39 lines
2.2 KiB
Markdown
Raw Normal View History

---
description: Next.js automatically optimizes your app to be static HTML whenever possible. Learn how it works here.
---
New docs (#9301) * Added the docs from Notion * Updated the links from notion to relative links * Added a routes manifest to the docs * Removed the <br> after examples toggle * Use the name of the section instead of Introduction * Fixed spelling errors * Optimize the content for Algolia * Add a paragraph for `pageProps` * Add welcome section * Transpile -> Compile * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Test extra room between * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update getting-started.md * Update manifest.json * Update getting-started.md * Update getting-started.md * Add concepts section * Update pages.md * Update pages.md * Add data fetching section * Update pages.md * See how a card looks like * Undo card changes * Added related section to getting-started * Fixed wrong markdown syntax in the withRouter page * Moved the server-side-and-client-side section * Updated next-cli reference * updated getInitialProps section * Minor fixes * Added more Related sections * Add html to the related section in getting-started * Use small for the card * Use cards for all related sections * Added src directory docs * Added src directory to the manifest * Add note about API routes in next export * Add initial data fetching docs (private until new methods are released) * Fix typos * Improve wording * Update getting-started.md * Update getting-started.md * Move advanced concepts to advanced section * Hide server-side vs client-side * Move AMP support * Move typescript into one page * Add routing concepts page * Remove introduction page * Update section on different route types * Update routing.md * Update routing.md * Update routing.md * Update routing.md * Combine router injection pages * Update pages.md * Update routing.md * Update using-link.md * Update using-link.md * Update typescript.md * Move the API Routes typescript to basic features * Added links to the typescript section * Updated links to useRouter and withRouter * Add singleLevel prop to manifest * Added single page for router docs * Updated description * Updated the routes in the manifest * Add data fetching section * Update data-fetching.md * Update data-fetching.md * Update dynamic-routes.md * Update manifest.json * Only use the single router API page * Moved the concepts pages * Updated links * Removed extra space * Updated title for Router API * Added a description with frontmatter * Add open prop to the manifest * Added datafetching section to API Reference * Updated links to the getInitialProps reference * Moved some sections to API * Added next/head to API reference * Added next/link to the API Reference * Removed the populating-head section * Updated links to the new next/link API * Added link from dynamic-routes to next/link docs * use a paragraph * Added next/router API * Added next/amp * Updated the docs for next/amp * Moved the AMP support folder * Updated title * Content updates * Added more links to the data fetching section * Added links from the API to introductions * changing the router API * Updates to the router API * Updated the routing section * life improvements * Added shallow routing section * Small fix * Removed old routing sections * Updated link to shallow routing * Removed unrequired page * Removed /pages * Update data-fetching.md * Add initial deployments section * Update manifest.json * Update introduction.md * Update deployment doc * Add static export section updates * link ssg/ssr * Update deployment.md * Add syntax highlighting Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
2019-12-23 16:07:38 +01:00
# Automatic Static Optimization
Next.js automatically determines that a page is static (can be prerendered) if it has no blocking data requirements. This determination is made by the absence of `getInitialProps` in the page.
This feature allows Next.js to emit hybrid applications that contain **both server-rendered and statically generated pages**.
> Statically generated pages are still reactive: Next.js will hydrate your application client-side to give it full interactivity.
One of the main benefits this feature is that optimized pages require no server-side computation, and can be instantly streamed to the end-user from multiple CDN locations. The result is an _ultra fast_ loading experience for your users.
## How it works
If `getInitialProps` is present, Next.js will use its default behavior and render the page on-demand, per-request (meaning Server-Side Rendering).
If `getInitialProps` is absent, Next.js will **statically optimize** your page automatically by prerendering the page to static HTML. During prerendering, the router's `query` object will be empty since we do not have `query` information to provide during this phase. Any `query` values will be populated client-side after hydration.
`next build` will emit `.html` files for statically optimized pages. For example, the result for the page `pages/about.js` would be:
```bash
.next/server/static/${BUILD_ID}/about.html
```
And if you add `getInitialProps` to the page, it will then be JavaScript, like so:
```bash
.next/server/static/${BUILD_ID}/about.js
```
In development you'll know if `pages/about.js` is optimized or not thanks to the included [static optimization indicator](/docs/api-reference/next.config.js/static-optimization-indicator.md).
## Caveats
- If you have a [custom `App`](/docs/advanced-features/custom-app.md) with `getInitialProps` then this optimization will be disabled for all pages.
- If you have a [custom `Document`](/docs/advanced-features/custom-document.md) with `getInitialProps` be sure you check if `ctx.req` is defined before assuming the page is server-side rendered. `ctx.req` will be `undefined` for pages that are prerendered.