👍

Load images from server??

No, I just want to know if react lazy is worth implementing with next or does it already support it?

You mean lazy loading image or {lazy} from "react"?

BOTH

.

When I look at the next library from what I understand I don't need to use react's lazy loading (React.lazy). That's right ?

You can use

import dynamic from "next/dynamic"

Instead of React.lazy with React.Suspense

There are two ways to implement lazy loading in next which I've mentioned above

Refrence: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

Thanks but it does it automatically right?

you have to do something like this

'use client'
 
import { useState } from 'react'
import dynamic from 'next/dynamic'
 
// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
 
export default function ClientComponentExample() {
  const [showMore, setShowMore] = useState(false)
 
  return (
    <div>
      {/* Load immediately, but in a separate client bundle */}
      <ComponentA />
 
      {/* Load on demand, only when/if the condition is met */}
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore(!showMore)}>Toggle</button>
 
      {/* Load only on the client side */}
      <ComponentC />
    </div>
  )
}

////SERVER COMPONENT

import dynamic from 'next/dynamic'
 
// Server Component:
const ServerComponent = dynamic(() => import('../components/ServerComponent'))
 
export default function ServerComponentExample() {
  return (
    <div>
      <ServerComponent />
    </div>
  )
}

thx