Dynamically Render Client Side with Next.js
Next.js has a handy feature for rendering a child component client side, instead of on the server.
Consider the following example, where you have a component in src/components/Analytics.js
with a default
export.
import dynamic from "next/dynamic";
const DynamicAnalytics = dynamic(() => import("../components/Analytics"));
function Header(props) {
return (
<>
import("../components/Analytics").then(mod => mod.Analytics)
);
function Header(props) {
return (
<>
Tweet