SSR option close

[tiny loom]

Hi @livid frigate. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js, you can disable Server-Side Rendering (SSR) for specific components using the dynamic import function from Next.js. This function allows you to import components dynamically and includes an ssr option that you can set to false to disable SSR for that component.

Here's an example of how you can use it:

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'), {
  ssr: false
})

In this example, DynamicComponent will only be rendered on the client side (source (https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading)).

However, if you want to disable SSR for all pages at once, you can do so by setting the useFileSystemPublicRoutes configuration option to false in your next.config.js file:

module.exports = {
  useFileSystemPublicRoutes: false,
}

This will prevent Next.js from serving each file in the pages folder under a pathname matching the filename, effectively disabling SSR for all pages (source (https://nextjs.org/docs/pages/building-your-application/configuring/custom-server)).

Please note that this will disable filename routes from SSR, but client-side routing may still access those paths. You should guard against navigation to routes you do not want programmatically. Also, you may wish to configure the client-side router to disallow client-side redirects to filename routes.

Remember that turning off SSR can have implications for SEO and initial page load performance, so use these options carefully.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@livid frigate kapa.ai is still learning and improving, please let us know how it did by reacting below