I'm not sure if they are dogfooding their own framework, but it's annoying that the cards on the home page won't even let you select their content without going straight to a different page. It's a subtle breakage of `a href` behavior but I see that on a lot of sites where I'd like to copy a value and instead an action fires off when I don't want to.
Next.js 10
31–40 of 206 posts
Re: Next.js 10
#32Prediction: Google buys Vercel, kills Angular, steps further into e-commerce
If that happens I'm out, especially if they bundle it other Google products
Re: Next.js 10
#33As someone who only really built websites using jQuery / custom vanilla js and good ole CSS2, this stuff feels completely alien to me
Same. I mean I understand how it works but I ask myself what's the point every time. I've looked into react and I hate how it works and I hate how every 2 months people are begging for some new optimization because its slow and sucks. Then version 5000 is released and fixes that slowdown, but every react site I've ever used is still buggy and slow as hell.
Re: Next.js 10
#34The big elephant in the room most of these frameworks are missing is partial hydration. Instead of hydrating the whole page, only the interactive parts are hydrated, sending the absolutely minimal JS needed to the client. AFAIK only Marko has this feature today. Since it's developed and used at Ebay they focused on the best SSR+hydration experience from the start. Imba v2 will also have patial hydration (confirmed by…
It is coming soon. https://github.com/vercel/next.js/issues/10344
I think it's coming not soon based on the last comment of this issue.
Re: Next.js 10
#35I tried nextjs because I thought it would be a good way to learn React but I found it really confusing. Is it really better to master React first then try nextjs?
Re: Next.js 10
#36Does Next.js do pre-rendering, i.e. if I have a store with 500 products, will it pre-render the HTML (photos, etc.) for all 500 products and serve it as a static request? Or will it assemble the template on the server, send it down to the client and then do some amount of interactivity hydration later on during the page load? What if my store has multicurrency / multilingual versions of all these 500 pages - will it…
It _can_ prerender all of those combinations. Here is a directory I made with 1000+ pages, prerendered and hosted for free on netlify: https://www.givepuppylove.com/organizations/ . I've found that single digit thousands is about the maximum you can currently have and keep build times reasonable.
If you want to recognize the user's location and display the appropriate currency or language, you would probably want to wrap content dependent on location in a "ClientOnly" type component. So it would not be prerendered in that case. Example code:
export default function ClientOnly({ children, ...delegated }) {
const [hasMounted, setHasMounted] = useState(false)
useEffect(() => { setHasMounted(true) }, [])
return hasMounted ? {children} :
}
Re: Next.js 10
#37I'm not sure if they are dogfooding their own framework, but it's annoying that the cards on the home page won't even let you select their content without going straight to a different page. It's a subtle breakage of `a href` behavior but I see that on a lot of sites where I'd like to copy a value and instead an action fires off when I don't want to.
Its worth pointing out that Next does not provide react components like cards - that is a separate implementation and just not a part of next.js.
Re: Next.js 10
#38I’m not a fan of these frameworks. They add another giant layer of stuff to learn and understand.
I’d rather just program react and the browser instead of hoping some framework will do it all for me.
Re: Next.js 10
#39I'm not sure if they are dogfooding their own framework, but it's annoying that the cards on the home page won't even let you select their content without going straight to a different page. It's a subtle breakage of `a href` behavior but I see that on a lot of sites where I'd like to copy a value and instead an action fires off when I don't want to.
this seems to have less to do with Next.js and is more of a design decision. Each card has a native anchor tag inside, and when you tab through these links the card is ignored and the links are focused. The card itself is a 'fake' js link, that redirects when clicked.
i personally would've made the entire card an anchor link, but either approach is possible in Next.js
Re: Next.js 10
#40> Nowadays users browse the web using their phones, tablets, and laptops, yet images are still as a one size fits all. For example: sites load a 2000 by 2000 pixel image, but phones are only displaying it as 100 by 100 pixels.
That's what srcset & were invented for.
> Furthermore, 30% of images on web pages are outside of the initial viewport, meaning the browser loads images that a user does not see until they scroll further down the page.
That's why we now have a loading=lazy HTML attribute
> When using the next/image component, images are automatically lazy-loaded, meaning they're only rendered when the user is close to seeing the image. This prevents loading that 30% of images outside of the initial viewport.
This has been done many times before. For images outside the viewport it's great; for images which are in the viewport, the browser isn't able to discover the image until the JS has loaded and decided which image size to fetch. In my experience this slows down the overall rendering of the page.
I see the Google Chrome team was involved in creating this component so I'd like to know what's different this time, because they have the data.
> Developers can mark images that are in the initial viewport, allowing Next.js to automatically preload these images. Preloading images in the initial viewport has shown improvements to the Largest Contentful Paint by up to 50%.
How can smart preloading work when the image size isn't known until the JS component runs? If we're back to loading the 2000px image then we're losing a lot of optimization.
If they're relying on client hints [1] then we can get as far as an image as wide as the browser window width, but no more - at the price of poor browser compatibility.
Preloading also has its own costs, as it messes with the browser's prioritization of page content. I've found it easy to prioritize something you know is essential and unintentionally increase load time metrics.