#Unable to Disable SSR for a Component Despite Using Dynamic Import in Next.j

5 messages · Page 1 of 1 (latest)

lone topaz
#

I'm working on a Next.js project and trying to disable Server-Side Rendering (SSR) for a specific component. To achieve this, I'm using next/dynamic with the ssr option set to false. However, it seems that SSR is still enabled for this component. Here's my code:

"use client"

import { useReducer } from 'react';
import { AddPlaylist } from "@/components/playlist/add-playlist";
import { Playlists } from "@/components/playlist/play-lists";
import dynamic from 'next/dynamic';

const AddListBtn = dynamic(() => Promise.resolve(AddPlaylist), {
  ssr: false,
})

function reducer(state : {count : number}, action : unknown){
  return { count : state.count + 1 }
}

export default function Home() {
  // listening CRUD actions for playlists 
  const [ state , dispatch] = useReducer(reducer, {count : 0})
  
  return (
    <div className="flex-1 min-h-screen">
      <div className="border-b-2 w-full dark:bg-[#1C1D26] dark:border-b-[#22232E] border-b-[#F5F5F8] py-3 flex flex-row-reverse z-40 sticky top-0">
        <AddListBtn state={state} dispatch={dispatch}/>
      </div>
      <Playlists state={state} dispatch={dispatch}/>
    </div>
  )
}

I've set ssr: false for the AddListBtn component, but it doesn't seem to have any effect. What am I missing, and how can I properly disable SSR for this component?

Any help or guidance would be greatly appreciated. Thank you!

opaque dockBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

lone topaz
#

I'm actually trying to develop a desktop app using Tauri. Some of the actions inside the AddPlaylist component use Tauri's API. I've even tried conditional triggering to check if the window object is undefined or not. However, I'm still getting a window is not defined error.

#

I am using nextjs 13.

lone topaz
#

I solved the problem by doing await import