Hi @brave ridge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#getInitialProps in _document.js
drifting baneBOT
Yes, using getInitialProps in a custom _document will cause your application to opt out of Automatic Static Optimization. However, you should check if ctx.req is defined before assuming the page is server-side rendered, as ctx.req will be undefined for pages that are prerendered.
Here's the relevant extract from the documentation:
If you have a custom
Document(https://nextjs.org/docs/pages/building-your-application/routing/custom-document) withgetInitialProps, be sure you check ifctx.reqis defined before assuming the page is server-side rendered.ctx.reqwill beundefinedfor pages that are prerendered.
Source: Automatic Static Optimization Caveats (https://nextjs.org/docs/pages/building-your-application/rendering/automatic-static-optimization)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
brave ridge
@drifting bane So can I somehow use getInitialProps in _document.js to be able to send backend env var as a prop to pages?
drifting baneBOT
Let me check the knowledge base for you. One moment! :books:
Using getInitialProps in _document.js is not the recommended way to send backend environment variables as props to pages. Instead, you should use the appropriate data fetching methods like getStaticProps or getServerSideProps in your individual pages to fetch data and pass it as props.
Here's an example of using getServerSideProps to fetch data and pass it as a prop:
export async function getServerSideProps(context) {
// Fetch data from your backend, using environment variables if needed
const data = await fetchDataFromBackend();
return {
props: {
data,
},
};
}
For more information on data fetching methods, refer to the following documentation:
getStaticProps(https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props)getServerSideProps(https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props)
Remember that using getInitialProps in a custom _document or _app will disable Automatic Static Optimization in pages without Static Generation.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
brave ridge
@drifting bane what happens if we disable Automatic staric optimization in pages without static generation?
drifting baneBOT
Let me check the knowledge base for you. One moment! :books:
When you disable Automatic Static Optimization in pages without Static Generation, it means that those pages will be server-side rendered instead of being statically generated. This can have an impact on performance, as server-side rendered pages require server-side computation and cannot be instantly streamed to the end-user from multiple CDN locations.
Automatic Static Optimization is a feature in Next.js that allows hybrid applications to contain both server-rendered and statically generated pages. Statically generated pages are still reactive, as Next.js hydrates your application client-side to give it full interactivity. One of the main benefits of this feature is that optimized pages require no server-side computation, resulting in an ultra-fast loading experience for your users.