Replies: 30 comments 80 replies
-
|
Related vercel/next.js#28180. We might also set UA-based rules to enable ISR/Static based on user-agent only for mobile or search engines with a simple API. (but it obviously is not supported on all edge CDNS and need a nitro hit at least once also they cannot benefit shared-cache) |
Beta Was this translation helpful? Give feedback.
-
|
Can we use this with SSR route runtime caching? Cached based on Cookies/UA/Browser/or generally REQ object I also have a question: Do we need to support all environments for specific strategy? that would be very painful :) |
Beta Was this translation helpful? Give feedback.
-
|
For SSR route runtime caching based in Cookie/UA/browser/device/crawler, you can try the below package until it is natively supported in the Nuxt core |
Beta Was this translation helpful? Give feedback.
-
nuxt sends here white trying to generate fully static site. |
Beta Was this translation helpful? Give feedback.
-
ok i see |
Beta Was this translation helpful? Give feedback.
-
I haven't done well for a long time. That's why |
Beta Was this translation helpful? Give feedback.
-
|
How to solve this problem, I need your help. |
Beta Was this translation helpful? Give feedback.
-
|
According to the |
Beta Was this translation helpful? Give feedback.
-
|
@SebastianThomas try the new/latest Release Candidate version. |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, Thanks for the hard work that you guys are putting. I'm wondering what is the timeline to get the ISR functionality to the market? |
Beta Was this translation helpful? Give feedback.
-
|
A year later I too am wondering this, super looking forward to these rendering features. |
Beta Was this translation helpful? Give feedback.
-
|
Is there a walkaround to let me generate a simple singe page application? |
Beta Was this translation helpful? Give feedback.
-
|
If it's a basic single page. Just save the HTML from the browser. |
Beta Was this translation helpful? Give feedback.
-
|
yes https://v3.nuxtjs.org/docs/directory-structure/nuxt.config#ssr |
Beta Was this translation helpful? Give feedback.
-
I tried setting [ssr: true / fase] and [target: "static" / "server"] with all 4 combinations, I can see many .mjs files inside .nuxt/dist/client, but no index.html Or according to https://v3.nuxtjs.org/getting-started/introduction/#comparison, static site is actually still unavailable? |
Beta Was this translation helpful? Give feedback.
-
|
Something I am struggling to decipher....will Nuxt 3 have ability to crawl + generate static site which can be deployed to static host, or is this not a concern and will be SSR only? For example, the nuxt 3 docs seem to have no reference to |
Beta Was this translation helpful? Give feedback.
-
|
Just left a comment at the bottom of the main thread, I did not see these replies. Same issues for me - unclear if static pages is an option in Nuxt3. Surely it is/will be. |
Beta Was this translation helpful? Give feedback.
-
|
Would it be possible to invalidate the statically generated page in "Prerendering" mode without a CI built? That would be quite a cool feature Also how would it look like: I think in next.js it shows a loading spinner, I'd prefer if the client just "waits" until it got SSR rendered and then send the HTML back (for SEO purposes) |
Beta Was this translation helpful? Give feedback.
-
|
I'd second that (including "static" mode) - a way to drop outdated pages to force re-generation on next hit would be really valuable to incrementally update generated pages on sites with lots of content. |
Beta Was this translation helpful? Give feedback.
-
|
I think what you are referring to is SWR (Stale-While-Revalidate) caching strategy |
Beta Was this translation helpful? Give feedback.
-
|
No, because SWR and ISR require an initial request to populate the cache the first time. This means that each deploy we start with a cold cache and all links are really slow to load… I've been digging into this and it seems feasible to accomplish ISR combined with static generation, at least on Vercel. Basically you can provide a "fallback static file" if the cache is empty. This could probably be the static artefacts generated using https://vercel.com/docs/build-output-api/v3/primitives#fallback-static-file @pi0 Care to comment? |
Beta Was this translation helpful? Give feedback.
-
|
Regarding on-demand pre-rendering: in Nuxt 2, when you modify a Vue component, the whole project is regenerated which is not convenient when the component only affects one route. Would it possible in Nuxt 3 to only regenerate routes impacted by updated components, or is it something not possible with current bundlers? |
Beta Was this translation helpful? Give feedback.
-
|
I'd say the tricky part is building a dependency graph and deciding which parts you have to update. So tracing back which components have to change (and which components are affected by those changes again). |
Beta Was this translation helpful? Give feedback.
-
|
Are there any plans to go even beyond the route-based rules and allow finer control over the render method/cache on a component level? For example, a component that does a relative expensive conversion between essentially static files (e.g. markdown > html) you would probably want to render once during the ci build. But on the same page/route you might want to show dynamic content based e.g. user login status etc, so this would be, say, client-side rendering. In nuxt2, I find the options of
These can be specified either in the component declaration or using special wrapper like
Probably related: https://github.com/nuxt/framework/discussions/666 |
Beta Was this translation helpful? Give feedback.
-
|
Great suggestion :) |
Beta Was this translation helpful? Give feedback.
-
|
Instead of having a separated configuration file, it would be nice to be able to handle this at the page level. I like your wrapper component suggestion, but what if we could leverage vue SFC instead? <script setup nuxt:client>
const message = "client only"
</script>
<template>{{ message }}</template>
Then for the static we can have some kind of |
Beta Was this translation helpful? Give feedback.
-
|
It seems similar to Astro |
Beta Was this translation helpful? Give feedback.
-
|
For generating static paths i would also propose to include some hook similar to getStaticPaths and getStaticProps in Next.js |
Beta Was this translation helpful? Give feedback.
-
|
@pi0 @danielroe What do you think about this proposal? |
Beta Was this translation helpful? Give feedback.
-
|
Can we also have rewrite rules for any route? Often this is associated with If we can provide something like this, it would be much easier to handle the situation export default defineNuxtConfig({
routes: {
'/public/.well-known/apple-app-site-verification': { contentType: "application/json" }, // Redirect Rules for apple-app-site-verification
}
}) |
Beta Was this translation helpful? Give feedback.
-
|
What if I develop several server api routes to handle my backend logic, how could I cache /server/api responses so that client side navigation doesn't trigger many server-to-server calls? |
Beta Was this translation helpful? Give feedback.
-
|
I had this same need in a project some time ago. Basically what I did was implement a per-route middleware that would get the signature of the request, such as the full url including params. Then if there was a Redis entry for that signature, return it early, otherwise continue with the request flow and then save the final payload to Redis using the request signature. |
Beta Was this translation helpful? Give feedback.
-
|
You can use a service worker to cache responses. I would recommend a Additional Docs |
Beta Was this translation helpful? Give feedback.
-
|
@fallsimply service worker would cache the request client side. I was talking about a sort of SWR cache on the lambda. Netlify's builder function/cloudflare KV store or a redis cache are all means to achieve this behaviour, I was just asking myself if this could be baked in nuxt caching strategies since the server folder is so powerful and this could be a common use case |
Beta Was this translation helpful? Give feedback.
-
|
Not clear on this. Using the default app that comes from installing Nuxt3, how do I generate a html page?
Doesn't result in a html page after running |
Beta Was this translation helpful? Give feedback.
-
|
Just to avoid confusion. The current @pi0 (sorry for the mention, I bet you're getting a lot of these recently 😄), what's the progress with this one? Is it coming in the next RC? We're stuck on one of the features we are working on, because we expected |
Beta Was this translation helpful? Give feedback.
-
|
@ilyasmez most of the people are probably fine with a "I can host it on Netlify" type of static as of right now. 😂 |
Beta Was this translation helpful? Give feedback.
-
|
@kissu I was just highlighting the fact that I'm not sure about the "most people" part. Not being fully static has security concerns. Because if you need some secrets to call the API, those will be exposed with the current state of I'm working on a module that I think will be very useful for the Nuxt community, but it needs the full static feature. That's why I'm gently asking if we have an idea about the ETA. I know that the maintainers are busy with their work, and I respect that, because that's exactly what I'm doing as well. Also, I'm not a big fan of surprises.... but I love mojitos!! Cheers buddy 🍹 |
Beta Was this translation helpful? Give feedback.
-
|
@kissu I've asked on 3 separate occasions on the nuxt discord if nuxt3 supports "full static generation" and unanimously the community responded "yes, Considering how much misinformation and confusion is out there about
|
Beta Was this translation helpful? Give feedback.
-
|
@ilyasmez it's pretty much written in a big yellow alert at the top of the page here: https://v3.nuxtjs.org/guide/deploy/static-hosting#static-hosting Probably coming from the fact that people are using public API or a backend proxy of some sorts if using sensitive secrets. It's also not a security concern because most people are probably thinking about Vue (and hence Nuxt) as a client side only-thing, hence not putting any secrets. I have to say that I'm glad that you're creating a module for the community, thanks for that one! 💪🏻🤗 @Spunkie not everybody on Discord is on the same page of knowledge regarding the framework. I doubt somebody from the inner team told you something like that. Or maybe they thought that you were talking only about SSG. The 2 links given at top of this message are still relevant. If you feel like 2 more sentences could improve the whole thing and clear any misinformation or confusion, I highly encourage you to take 10min to submit an amazing ✨ PR. Also, if you are aware of such confusion, please share some of your knowledge. Everybody will be grateful to you and the community will move into a greater direction! 😄 So given all of this, do you:
Cognitive load is a thing. Can lead to a lot of mental breakdown. Please do not mention people if it's not critical. Giving an exact date is hard too. 👍🏻 Also, you need to understand that all the people here do REALLY care about their tan and summer body. 🤣 |
Beta Was this translation helpful? Give feedback.
-
|
@pi0 Can you give an indication of what isn't yet working on the generate support? I have When I do a nuxt build then it says it's pre-rendering It just seems to load the standard scripts, which then construct the HTML on the client side. |
Beta Was this translation helpful? Give feedback.
-
|
That is because you have ssr: false, set it to true, if you don't your page is a SPA |
Beta Was this translation helpful? Give feedback.
-
|
@letoast Sorry, yes, my mistake. But if I set ssr true then I don't see it generated on the server side either. The template is: I can see from a console.log that it evaluates
The map then loads ok on the client. So although SSR is executing without error, and constructing the |
Beta Was this translation helpful? Give feedback.
-
|
I can get server to work and static to work. I am struggling to understand where the "hybrid" fits in. I have tried numerous combinations of settings on the Is there some documentation I am missing or it this still to be developed? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
It's still a work in progress. On the website, Hybrid has a "soon" badge next to it |
Beta Was this translation helpful? Give feedback.
-
|
Is there a way to set cache-cantrol: no-cache for specific pages? Not just for api, but on the page level. |
Beta Was this translation helpful? Give feedback.
-
|
I really need this feature too. |
Beta Was this translation helpful? Give feedback.
-
|
Any roadmap regarding when It will be fully implemented? |
Beta Was this translation helpful? Give feedback.
-
|
Probably by the end of summer. 🏖🍹😉 |
Beta Was this translation helpful? Give feedback.
-
|
Are there any plans to provide SSG capabilities like Next.js |
Beta Was this translation helpful? Give feedback.
-
|
@kissu Renders on client side : <script setup nuxt:spa>
const message = "I'm spa!"
</script>
<template>{{ message }}</template>Renders at build time and then completely static: <script setup nuxt:ssg>
const message = "I'm ssg'd !"
</script>
<template>{{ message }}</template>Renders on request : <script setup nuxt:ssr>
const message = "I'm ssr'd !"
</script>
<template>{{ message }}</template> |
Beta Was this translation helpful? Give feedback.
-
|
@kissu well you cant define routes for SSG in build time with a clean way. With next it's very clear what's going on with |
Beta Was this translation helpful? Give feedback.
-
|
Surprisingly this is already a feature of |
Beta Was this translation helpful? Give feedback.
-
|
Actually, we could integrate route caching rules with static props extracted from |
Beta Was this translation helpful? Give feedback.
-
|
it would be awesome to have a good method to define which pages gonna be pre-rendered at build time. for example lets say const { data } = await backendDataService.getLatestProducts() // fetch latest 10 productsand i want to feed these data to |
Beta Was this translation helpful? Give feedback.
-
|
I created a topic which might be related to what is being discussed in this thread: https://github.com/nuxt/framework/discussions/7140 Can anyone point me to the documentation that might exist to answer my question? |
Beta Was this translation helpful? Give feedback.
-
|
I notice Pooya's update that an initial version of this implementation landed in nitro. Has anyone tried building an hybrid app using route specific rules (based on whatever has been implemented till now)? It will be very helpful if someone can share a sample repo. Im new to Nuxt, and I understand all the various rendering strategies, and I easily understand and love the above route specific rules implementation with a single "build" command instead of two different commands ("build" & "generate"). But Im struggling with the various combinations of config like ssr, target (not available as per nuxt3 docs), generate (not available as per nuxt3 docs), nitro, nitro.routes & nitro.prerender.routes (with or without crawlLinks), the two different commands - build & generate in nuxt3 context, and also with Daniel's nuxt-full-static module. Is the generate command a shortcut for the build command with nitro.prerender.crawlLinks set to true? Also, am I right in understanding that in nuxt world, "ssg/static" means prerender-without-crawling and "fully static" means prerender-with-crawling? Thanks in advance. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @mahdiboomeri for your analysis report. Unfortunately, the wildcard I also tried these route without success: |
Beta Was this translation helpful? Give feedback.
-
|
@Mokkapps No wildcards don't seem to work for me either. It seems like you have to explicitly specify each route in the configuration. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks bunch @mahdiboomeri, this is very helpful. I finally deciphered this, hopefully I got this right:
* Fully static is coming soon
Regarding hybrid rendering ( |
Beta Was this translation helpful? Give feedback.
-
|
I tried to use the nitro's swr route configuration but didn't worked. Did someone had success with that? @pi0 is that ready to use in the RC 11? |
Beta Was this translation helpful? Give feedback.
-
No success at my end. We were able to achieve this using Nginx cache. |
Beta Was this translation helpful? Give feedback.
-
|
Not sure if this is the right place... But here is my problem: |
Beta Was this translation helpful? Give feedback.
-
|
Take a look at https://github.com/nuxt/framework/discussions/7513#discussioncomment-3651078 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, that helps indeed ! I had no idea of this. |
Beta Was this translation helpful? Give feedback.
-
|
Regarding the RFC, I wonder if there will be confusion with this |
Beta Was this translation helpful? Give feedback.
-
|
The problem I am having is when I prerender a route and refresh it then the prerender is working as it should. I get the same page. But when I navigate to that prerendered route via NuxtLink then the setup script runs instead of getting the prerendered route. Is there a way to solve this? Here is an example repo. When I use the NuxtLink in the index.vue then the script setup runs that is in the about.vue so I get a different random number. Refreshing the page gives me the same number every time as it should. Also here is vercel app. |
Beta Was this translation helpful? Give feedback.
-
|
This would be quite expected no? |
Beta Was this translation helpful? Give feedback.
-
I tried Next Js and the random number didn't change when I navigated on the client side. What if I were to make a request on that page that would give the same exact response? This kind of loses the point of pre-rendering in my opinion. |
Beta Was this translation helpful? Give feedback.
-
|
Questions ;-)
Those would be very useful, that would allow content editor to check page before updating them and to, above all, modify existing pages without rebuilding the whole website once they are satisfied with the preview. |
Beta Was this translation helpful? Give feedback.
-
|
Any news on this front ? Huge fan of Nuxt here, for years, but frankly I'm more and more lost with all the possibilities... @Atinux @danielroe, this is amazing what you provide and add all the time: the modules, the new Nuxt dev tools, server and island component... Great stuff for sure but each time I get more confused. But maybe also many others simple website makers like me ? In reality, I have "simple" needs to work and to produce effective websites. Nuxt-image with full static, an equivalent of preview=true for example are among those things... It used to work with Nuxt 2. I'm sure all this will come... is it maybe already there ? |
Beta Was this translation helpful? Give feedback.
-
|
In case of dynamic routing, how should I set it up? '/blog/[id]' Should I set it like below? in nuxt.config,
|
Beta Was this translation helpful? Give feedback.
-
|
As usual with globs:
You can go for |
Beta Was this translation helpful? Give feedback.
-
|
thank you! for your help :) !! |
Beta Was this translation helpful? Give feedback.
-
|
how to do it if it is already a few layers deep, and then a dynamic route like [xyz] comes ? |
Beta Was this translation helpful? Give feedback.
-
|
i have one question! is it alright? in nuxt.config
🙏 |
Beta Was this translation helpful? Give feedback.
-
|
No! The route rules are based on actual URLs, not folder structure. |
Beta Was this translation helpful? Give feedback.
-
|
Oh~! |
Beta Was this translation helpful? Give feedback.
-
|
Why is there no way to set caching rules for single Nuxt page routes? I've been trying to get caching to work for a const handlers = [
{ route: '', handler: _f4b49z, lazy: false, middleware: true, method: undefined }, // global middlewares
{ route: '', handler: _45A4ks, lazy: false, middleware: true, method: undefined },
{ route: '/sitemap.xml', handler: _lazy_EpJV78, lazy: true, middleware: false, method: undefined }, // server route
{ route: '/__nuxt_error', handler: _lazy_CnrjO8, lazy: true, middleware: false, method: undefined }, // nuxt error handler (probably)
{ route: '/**', handler: _lazy_CnrjO8, lazy: true, middleware: false, method: undefined } // every page
];The only way to cache any Nuxt pages is by creating a route rule for the Am I missing something or has this just not been implemented yet? |
Beta Was this translation helpful? Give feedback.
-
|
It should work; if not, please create an issue with reproduction. The caching for individual pages doesn't entail a separate handler. |
Beta Was this translation helpful? Give feedback.
-
|
Created an issue with reproduction. |
Beta Was this translation helpful? Give feedback.
-
|
For people who want nitros caching layer (unstorage) for Nuxt's pages without the need to deploy to Vercel/Netlify: Add this to your hooks: {
'nitro:build:before': (ctx) => {
const additonalRoutes = Object.keys(ctx.options.routeRules)
for (const route of additonalRoutes) {
ctx.options.handlers.push({
route,
handler: ctx.options.renderer,
lazy: true,
middleware: false,
method: undefined,
})
}
}With this you can use |
Beta Was this translation helpful? Give feedback.
-
|
I tried using this syntax but it didn't work: routeRules: {
'/(admin,auth)/**': { ssr: false },
},How can I combine multiple routes to the same rule? |
Beta Was this translation helpful? Give feedback.
-
|
You have to use seperate route... routeRules: {
'/admin/**': { ssr: false },
'/auth/**': { ssr: false },
}, |
Beta Was this translation helpful? Give feedback.
-
|
This new approach is very powerful, but it also opens up expectations of even more control over rendering ;) Is there a way to invalidate cache for a route without doing a full rebuild? |
Beta Was this translation helpful? Give feedback.
-
|
You can use cachedEventHandler/cachedFunction for individual functions or Route Rules for route level caching : https://nitro.unjs.io/guide/cache |
Beta Was this translation helpful? Give feedback.
-
|
Nice, I need to do some reading but it seems promising |
Beta Was this translation helpful? Give feedback.
-
|
defineCachedEventHandler works great.. but defineCachedFunction does not expire after maxAge... maybe I'm doing something wrong? |
Beta Was this translation helpful? Give feedback.
-
|
Having hybrid rendering open up lot of edge cases that does not fit the actual configuration options. Let's say you have a project like : If you use plugins in your project that need to be shipped in the client for your SPA (/app/) it will also be shipped in the client entry.js of your static site (/*) and the only configuration you have access is .client or .server but in this case they are both on the client side but you do not want to ship a bunch of dependencies in the entry of your static site. |
Beta Was this translation helpful? Give feedback.
-
|
What if I want to cache all routes in general except some specific ones? |
Beta Was this translation helpful? Give feedback.
-
|
You can try also setting |
Beta Was this translation helpful? Give feedback.
-
|
Okay I will try, thanks for the fast reply. |
Beta Was this translation helpful? Give feedback.
-
|
seems this is bug .
|
Beta Was this translation helpful? Give feedback.
-
|
cc: @pi0 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for repro! ~> unjs/nitro#1751 |
Beta Was this translation helpful? Give feedback.
-
|
@danielroe Is there a way to verify our config via Nuxt devtools? It is a bit confusing with i18n on top of it. |
Beta Was this translation helpful? Give feedback.
and others
-
Update
Initial version is implemented in unjs/nitro!
Server Rendering Strategies
Generally, we have several possible ways to render a route. In the table below, a summary is added. There are some similarities between these methods and to avoid confusing users for choosing the proper platform, we need a unified way of describing them and mentioning which nuxt version supports which and what are the trade-offs.
Strategy Configuration
We need a schema to describe route/route-groups in
nuxt.configwith their desired rendering strategy. In addition to caching, it can be useful to describe other meta like redirect rules and password protection. One important note is that, this configuration needs to be serializable to be reusable for vendor-specific purposes.Example:
Depending on the nitro platform or in-development, we can map route configuration to proper implementation.
For the context, with nuxt2, we have these options:
mode/ssr: Switch on/off SSR for entire projectgenerate.routes(helping crawler and prerenderer)req.spa(see Runtime Strategies)static: Enable Prerender/Crawler for all routesNew
routescan cover all but we can preserve them as shortcuts and compatibilityRuntime Strategies
Runtime strategies might be also possible but not working for all platforms if they need declarative configuration (like Vercel) and reduce optimization possibilities since we cannot easily predict what will happen for a specific route or if it is a request based rule or not. Yet we can partially support them for special cases (like this). Also we can have a way to infer config from pages.
Client-Side Behavior
Client Rendering behavior also depends on server Strategies:
Beta Was this translation helpful? Give feedback.
All reactions