75 lines
2.7 KiB
JavaScript
75 lines
2.7 KiB
JavaScript
|
'use client';
|
||
|
|
|
||
|
|
import * as React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
|
||
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
||
|
|
/**
|
||
|
|
* NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
|
||
|
|
*
|
||
|
|
* This component can be useful in a variety of situations:
|
||
|
|
*
|
||
|
|
* * Escape hatch for broken dependencies not supporting SSR.
|
||
|
|
* * Improve the time-to-first paint on the client by only rendering above the fold.
|
||
|
|
* * Reduce the rendering time on the server.
|
||
|
|
* * Under too heavy server load, you can turn on service degradation.
|
||
|
|
*
|
||
|
|
* Demos:
|
||
|
|
*
|
||
|
|
* - [No SSR](https://mui.com/base-ui/react-no-ssr/)
|
||
|
|
*
|
||
|
|
* API:
|
||
|
|
*
|
||
|
|
* - [NoSsr API](https://mui.com/base-ui/react-no-ssr/components-api/#no-ssr)
|
||
|
|
*/
|
||
|
|
function NoSsr(props) {
|
||
|
|
var children = props.children,
|
||
|
|
_props$defer = props.defer,
|
||
|
|
defer = _props$defer === void 0 ? false : _props$defer,
|
||
|
|
_props$fallback = props.fallback,
|
||
|
|
fallback = _props$fallback === void 0 ? null : _props$fallback;
|
||
|
|
var _React$useState = React.useState(false),
|
||
|
|
mountedState = _React$useState[0],
|
||
|
|
setMountedState = _React$useState[1];
|
||
|
|
useEnhancedEffect(function () {
|
||
|
|
if (!defer) {
|
||
|
|
setMountedState(true);
|
||
|
|
}
|
||
|
|
}, [defer]);
|
||
|
|
React.useEffect(function () {
|
||
|
|
if (defer) {
|
||
|
|
setMountedState(true);
|
||
|
|
}
|
||
|
|
}, [defer]);
|
||
|
|
|
||
|
|
// We need the Fragment here to force react-docgen to recognise NoSsr as a component.
|
||
|
|
return /*#__PURE__*/_jsx(React.Fragment, {
|
||
|
|
children: mountedState ? children : fallback
|
||
|
|
});
|
||
|
|
}
|
||
|
|
process.env.NODE_ENV !== "production" ? NoSsr.propTypes /* remove-proptypes */ = {
|
||
|
|
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
||
|
|
// │ These PropTypes are generated from the TypeScript type definitions. │
|
||
|
|
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
||
|
|
// └─────────────────────────────────────────────────────────────────────┘
|
||
|
|
/**
|
||
|
|
* You can wrap a node.
|
||
|
|
*/
|
||
|
|
children: PropTypes.node,
|
||
|
|
/**
|
||
|
|
* If `true`, the component will not only prevent server-side rendering.
|
||
|
|
* It will also defer the rendering of the children into a different screen frame.
|
||
|
|
* @default false
|
||
|
|
*/
|
||
|
|
defer: PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* The fallback content to display.
|
||
|
|
* @default null
|
||
|
|
*/
|
||
|
|
fallback: PropTypes.node
|
||
|
|
} : void 0;
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
// eslint-disable-next-line
|
||
|
|
NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
|
||
|
|
}
|
||
|
|
export { NoSsr };
|