Comments (22)
@MaximeHeckel heyo. we're still technically at the same crossroads we were at before. however! we have had many, many conversations internally about the right way to approach caching problems like this one, with a clear proposed solution. can't share too much but just know it is moving, and we're making sure we're doing it right and staying aligned with netlify's philosophy. will be worth the wait! let me know if i can answer anything else <3
from next-runtime.
hey, @MaximeHeckel! we have an experimental feature in development that we think helps here [edit: dang, y'all email fast. removing the details now 💜 ]
from next-runtime.
hello all! for those who haven't seen: today netlify announced our first step towards solving the problems ISR/ISG originally set out to solve.
https://www.netlify.com/blog/2021/04/14/faster-builds-for-large-sites-on-netlify-with-on-demand-builders-now-in-early-access/
https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/
what i can offer you today is a tagged release of our plugin:
npm install --save @netlify/plugin-nextjs@experimental-odb
this release uses on-demand builders to dramatically improve next/image performance by caching next/image requests.
it is my hope to ship this as the primary release after a week or two of testing. at that time, i will close this issue :).
please let me know if you have any feedback or questions!! <3
from next-runtime.
a very big shoutout to jason (@jlengstorf) who's been hugely responsible for all of the work that's gone into next/image support from day one and who's been overall instrumental in helping with next-on-netlify's toughest problems!!! ❤️
from next-runtime.
Hey @jlengstorf that would be amazing 🔥 ! sending you an email right now!
from next-runtime.
@GBrachetta @juliefleet and everyone - thanks so much for your patience! last week we had two lucky folks from this thread test out our solution. on/around april 13th, we'll be able to finally offer it to everyone. 👀 hang tight!
from next-runtime.
if you have your plugin installed at a fixed version (i.e. you npm installed it), then you'll need to upgrade the plugin version with the new release (when it happens).
if you just have the plugin installed via your .toml file or the UI or it's auto installed on your site, then you're good to go and no action necessary!
from next-runtime.
🎉 🎉 The improvements the team is making on this are just amazing!
I was testing one of the other experimental-release for next/image support but the @netlify/plugin-nextjs@experimental-odb
has significantly improved the loading speed of my images!! It's getting closer to the point where I could use this in prod 🙌
Questions:
- Is there going to be some sort of support for .gifs ? (It's not a huge deal honestly but just wondering because now they are rendering as static images)
- I still have sometimes the following error:
errorMessage: "Response payload size (12809084 bytes) exceeded maximum allowed payload size (6291556 bytes)."
errorType: "Function.ResponseSizeTooLarge"
However the underlying image is relatively "small" : 370kB, and I can load some slightly heavier images. Any tips to handle these use cases? Could it be because the resolution of this image is fairly high?
from next-runtime.
Super excited about this, thanks to everyone at Netlify 🎉
from next-runtime.
Yesss! Can not wait 😁 I’ve tried this a week back and stumbled across this issue. Stoked that there might be a solution already this quickly! 🚀
I’ve sent you an email Jason. Love to try it out.
from next-runtime.
Hey @lindsaylevine,
Any update on a release date for this feature? 🙏
Thanks!
from next-runtime.
Looking forward to the release.
Just deployed a Next.js app to Netlify with 2 very small <Image />
components (no more than 50KB each) and they take a ridiculous amount of time to render: up to 3s for 36Kb after <Image />
optimisation! In this case I will obviously use an <img />
tag, but I'll soon need to deal with a lot more images and <Image />
seems to be unusable on Netlify.
Also noticed that the very same repo, same viewport, on a deployment on Vercel loads instantly and images are optimised in size to half of what Netlify does. I'm puzzled.
from next-runtime.
hey @MaximeHeckel! my understanding as of right now is that we may not see the internal caching functionality we're looking for until 1-2 months out :( this is because the team is heads down working on other priorities. if i can help speed this up at all, i will! and if there are any updates, i'll be sure to report them here. in the meantime, we suggest in the README (per netlify/next-on-netlify#138) using a provider like Cloudinary. hope that helps!!!
from next-runtime.
Thank you @lindsaylevine! So excited to see this happening 🎉 And no worries, this is a dependency on some personal work I can easily postpone, I'm not in a rush 😄
from next-runtime.
That's great news thank you @lindsaylevine!
from next-runtime.
I have been watching this thread for a bit and I am super excited! Thanks for all the hard work @lindsaylevine !
from next-runtime.
Thank you for the update @lindsaylevine! 🎉 Is there a timeline you can share until better caching / performances becomes available?
from next-runtime.
Hey @lindsaylevine!
Are there any updates you could give regarding the progress the Netlify team has made on this issue?
from next-runtime.
Thank you @lindsaylevine, looking forward to test it and compare it with Vercel's native solution.
Will this require any action from us once it's been released (rebuild/redeploy or reinstallation of the plugin)?
from next-runtime.
- i can look into the gif support, i think i accidentally left it out by mistake
- what width height and quality are you passing for this image? not sure :/
from next-runtime.
- Oh awesome! If by any chance gif support is not planned in the short term that's also totally fine
- The original image is 1288 × 1254 and 373 KB. Regarding the props that I'm passing to the
next/image
component:
src="/static/images/sunshine-settings-panel.png"
layout="responsive"
width={700}
height={675}
quality={50}
from next-runtime.
🎉 🎉 The improvements the team is making on this are just amazing!
I was testing one of the other experimental-release for next/image support but the
@netlify/plugin-nextjs@experimental-odb
has significantly improved the loading speed of my images!! It's getting closer to the point where I could use this in prod 🙌
Agreed! Quite an improvement! Thanks, team!
from next-runtime.
Related Issues (20)
- [Bug]: API Routes return 502 due to Headers reference error HOT 1
- [Bug]: @netlify/plugin-nextjs is messing up everything HOT 2
- [Bug]: ENOENT internal error with monorepo setup HOT 7
- [Bug]: Plugin "@netlify/plugin-nextjs" internal error: ENOENT: no such file or directory with runtime 5.0.0-beta.7 HOT 9
- [Bug]: Issue with data revalidation after new build HOT 3
- [Bug]: NETLIFY_NEXT_PLUGIN_SKIP no longer works in v5 HOT 7
- Nonce not automatically set in script tags when using CSP
- Middleware on sites with i18n cannot rewrite to static files
- Middleware should not add trailing slashes to non-data requests in static dir
- Pages router middleware should return 302 status for redirected data requests
- Server error pages return encoded data without `content-encoding` header if `accept-encoding` is `gzip`
- Fetch action prefetch cache test failing
- Appending `set-cookie` header in middleware leads to duplicate header
- Pages router data requests returning 404 when middleware is used
- Middleware does not match when using basePath and default locale
- Middleware matching is too broad when using i18n
- Does not correctly handle user middleware that redirects to path with canonical locale casing when app enables `skipMiddlewareUrlNormalize` and path contains locale slug with non-canonical casing
- 5.3.3 build error HOT 5
- cancel
- Local builds: `netlify build` followed by `netlify deploy` doesn't work with Next.js sites HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-runtime.