Next.js Discord

Discord Forum

dynamic import disables ssr of whole page

Answered
Japanese cockle posted this in #help-forum
Open in Discord
Japanese cockleOP
I'm building a Next.js application with Leaflet for mapping and React Query for data fetching. I'm encountering the classic "window is undefined" error during build because Leaflet requires browser objects.

I need a solution that allows me to:

1. Use SSR for initial page load and data prefetching with React Query
2.Render Leaflet map components only on the client (after hydration)
3.Maintain the SEO and performance benefits of SSR

What I've tried
// This doesn't work after first load, map doesnt render
const isClient = typeof window !== 'undefined';
{isClient && <MapComponent />}


I've also tried dynamic imports with ssr: false, but this fully disables SSR for the component, preventing my React Query prefetch from working properly, saying I need to use client page and client pages cant be async.

// This disables SSR completely for the page.tsx
const MapComponent = dynamic(() => import('../components/Map'), { ssr: false });


Question
Is there a way to have:

Full SSR for the initial render and data fetching
One client-side re-render after hydration to initialize Leaflet components?
Answered by Oriental
Hard to tell without any code, but you can try and split your MapComponent up as much as possible so you SSR your components and only lazy load the leaflet component
View full answer

9 Replies

Oriental
I've had this issue with a library I was using since it assumed it's going to be running in the browser and accesses browser specific apis, like window. What worked is same as your second option. Dynamic import, turn ssr off, then any operations you need to fire off use an effect in your component
Oriental
Hard to tell without any code, but you can try and split your MapComponent up as much as possible so you SSR your components and only lazy load the leaflet component
Answer
LuisLl
// This doesn't work after first load, map doesnt render
// !! because it doesn't notify React to re-render once it's mounted on the client
const isClient = typeof window !== 'undefined';
{isClient && <MapComponent />}
Instead, try this:
const [isClient, setIsClient] = useState(false);

useEffect(() => {
  setIsClient(true);
}, [])

return <>...
{isClient && <MapComponent />}
...</>

Effects run only on the browser, so it's safe.
Japanese cockleOP
Thank you @Oriental and @LuisLl I combined both of your answers. The trick was to create a separate component as a map wrapped and dynamically import the Map.tsx there.

If I dynamically imported in page.tsx SSR would automatically switch off. It is kinda weird because there is no reason why should dynamic import disable SSR in a whole page, but well here we are.

The solution (MapWrapper.tsx):

'use client';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';

interface MapProps {
  className?: string;
  center?: [number, number];
  zoom?: number;
}

const LoadingMessage = () => (
  <p className="h-full flex items-center justify-center text-muted-foreground">
   Loading interactive map...
  </p>
);

const Map = dynamic(() => import('./Map'), {
  ssr: false,
  loading: () => <LoadingMessage />,
});

export const MapWrapper = ({ center, zoom }: MapProps) => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient || typeof window === 'undefined') return <LoadingMessage />;
  return <Map center={center} zoom={zoom} />;
};


This works as the page.tsx is still a server side react component and prefetching works, only the map is client side and rerenders on the client. html from the server shows " Loading interactive map..."



Thank you both again.
LuisLl
Good to know it worked!
Japanese cockleOP
Just found out it can be even simpler, no need for useState, useEffect. It was just about using dynamic import in a wrapper, not directly in page.tsx

// MapWrapper.tsx
'use client';
import dynamic from 'next/dynamic';

interface MapProps {
  className?: string;
  center?: [number, number];
  zoom?: number;
}

const LoadingMessage = () => (
  <p className="h-full flex items-center justify-center text-muted-foreground">
    Načítám interaktivní mapu...
  </p>
);
const Map = dynamic(() => import('./Map'), {
  ssr: false,
  loading: () => <LoadingMessage />,
});

export const MapWrapper = ({ center, zoom }: MapProps) => (
  <Map center={center} zoom={zoom} />
);


In page.tsx

{* some jsx *}
<MapWrapper />
LuisLl
I thought you had already done that. Btw even simpler, you don’t need a wrapper for that, I’ve done it like this before, and if you need a component for the loading then just also add it on that file.
"use client";

import dynamic from "next/dynamic";
import { useEffect, useState } from "react";

export const DynamicScreenDevTools = dynamic(async () => ScreenDevTools, {
  ssr: false,
});

function ScreenDevTools() {
  const [isShow, setIsShow] = useState(true);
  …
}
Instead of exporting MapWrapper and forwarding props to the dynamic component you could call the dynamic component directly and pass props to it.