정적 사이트 생성(SSG)
In architecture, we mentioned that the theme is run in Webpack. 하지만 주의하세요. 그렇다고 해서 항상 브라우저에 전역으로 접근할 수 있는 것은 아닙니다! 테마는 두 번 빌드됩니다.
- During server-side rendering, the theme is compiled in a sandbox called React DOM Server. You can see this as a "headless browser", where there is no
window
ordocument
, only React. SSR은 정적 HTML 페이지를 생성합니다. - During client-side rendering, the theme is compiled to JavaScript that gets eventually executed in the browser, so it has access to browser variables.
Server-side rendering and static site generation can be different concepts, but we use them interchangeably.
엄밀하게 말하면 도큐사우루스는 서버 측 런타임이 없기 때문에 정적 사이트 생성기입니다. 각 요청에 대해 동적으로 사전 렌더링하는 대신 CDN에 배포된 HTML 파일로 정적으로 렌더링합니다. This differs from the working model of Next.js.
Therefore, while you probably know not to access Node globals like process
(or can we?) or the 'fs'
module, you can't freely access browser globals either.
import React from 'react';
export default function WhereAmI() {
return <span>{window.location.href}</span>;
}
This looks like idiomatic React, but if you run docusaurus build
, you will get an error:
ReferenceError: window is not defined
This is because during server-side rendering, the Docusaurus app isn't actually run in browser, and it doesn't know what window
is.
What about process.env.NODE_ENV
?
One exception to the "no Node globals" rule is process.env.NODE_ENV
. 사실 웹팩이 이 변수를 전역 변수로 주입하기 때문에 리액트에서 사용할 수 있습니다.
import React from 'react';
export default function expensiveComp() {
if (process.env.NODE_ENV === 'development') {
return <>This component is not shown in development</>;
}
const res = someExpensiveOperationThatLastsALongTime();
return <>{res}</>;
}