Deferred image loading

[primal delta]

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)

[ionic smelt]

👍

[humble meteor]

Load images from server??

[mellow portal]

Please add more information to your question

Your question currently does not have sufficient information for people to be able to help. Please add more information to help us help you, for example: relevant code snippets, a reproduction repository, and/or more detailed error messages. See more info on how to ask a good question in https://discord.com/channels/752553802359505017/1138338531983491154 and #welcome message

[ionic smelt]

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

[humble meteor]

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

[ionic smelt]

BOTH

[ionic smelt]

.

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 ?

[humble meteor]

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

[ionic smelt]

Thanks but it does it automatically right?

[humble meteor]

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>
  )
}