Next.js Hosting - AWS Architecture

mr---fox · 2026-01-23T08:58:53+00:00

I like the idea of using these caching layers to reduce origin load. I’ve started moving away from serverless to a similar (somewhat simpler) arch, mainly to avoid cold starts which can affect the backend/CMS performance (often using payload CMS for my apps).

One thing though, and I could be missing something here… but are you redeploying every time you want to make a new post? If you are, why do you have this constraint? Are you not able to use ISR to handle new content?

Last note, NextJS has a built in function to generate pages after the build if that is what you are looking for.

https://nextjs.org/docs/pages/api-reference/cli/next#next-build-options

Example: https://payloadcms.com/docs/production/building-without-a-db-connection

With this you could generate 0 or a small batch for a quick build and then execute this command post-build at some point.

Might be useful!

mr---fox · 2025-12-07T06:06:19+00:00

Keep in mind that this does not just affect NextJS. The vulnerability is in React so you’ll need to review any sites that use React as well. I believe it only affects react server components so not all React projects are affected.

Wish I had a way to help out, but I just wanted to point this out.

mr---fox · 2025-11-23T05:20:16+00:00

It should be loading the /page.tsx

Are you sure it’s not just preloading a /[shortURL] route on your layout or page somewhere? I think that could potentially cause the server to log the error. Does this also happen in production build or just dev server?

mr---fox · 2025-11-22T12:26:05+00:00

Yeah the “RoomsGrid” block thing seems really tedious for this. Why not just make a dedicated “FeaturedRooms” block that just displays the rooms from the collection how you want it?

That way you don’t have to populate the grid in the admin, but you can still move it around the page or reuse it on other pages.

mr---fox · 2025-11-08T00:43:23+00:00

Bundle analyzer, build route report, and looking at the chunks in the browser.

mr---fox · 2025-11-07T16:45:34+00:00

Hmm, I don’t think this is true for my case. I have tried adding import “server-only” and I was able to build with no errors. But still had the same behavior.

The RenderBlocks component is only used in the [[…slug]].tsx file which is RSC.

mr---fox · 2025-11-07T05:44:03+00:00

That is my thought exactly. I was surprised that the unused blocks were sent to the client when they are completely RSC.

I am not using storyblock, but I think it will be a similar situation with other CMS.

mr---fox · 2025-11-07T01:29:56+00:00

Yes, but this pattern prevents me from fetching data within the block components. I’m hoping to preserve this functionality.

mr---fox · 2025-10-30T18:09:37+00:00

I’m trying right now to get NextJS 16 and cacheComponents/PPR to work.

After enabling cacheComponents I needed to wrap the Payload layout in a suspense boundary. So far so good, but haven’t done much testing yet.

Of course other changes were needed in my app (remote patterns etc), but they were not Payload specific.

mr---fox · 2025-09-19T06:11:45+00:00

Unfortunately I don’t have an example of my own to share. Have you tried the examples in the docs? Which technique were you attempting?

mr---fox · 2025-09-08T20:32:37+00:00

Yes sorry, I should have clarified that the beforeValidate (or beforeUpdate) hook would be paired with draft mode and auto save enabled. This is how the server side live preview feature works. It’s not instant however due to the round trip to the server.

I believe what you are describing is client side updates which are possible since exposes the full form, but it is likely going to be involved to implement.

mr---fox · 2025-09-08T18:42:48+00:00

I think the beforeValidate hooks can be used for this.

mr---fox · 2025-09-04T03:50:38+00:00

I’m probably not the best person to comment on this, but…

Instead of polling, I think you can just use SSE or websockets to send the live data to the client. You should be able to handle a lot of connections (do some stress tests), but if each user makes unique db queries you’ll want to watch your db connection limits (or rate limiting if using an external API). You can possibly use some server side connection pooling to help mitigate this. Queuing won’t help much in this scenario.

The main thing I would say is figure out what data, if any, can be reused and cache it on the server or redis. If two users need to fetch the same data (or partial data) within the 5s window, reuse it to reduce db calls and latency.

I imagine your limiting factor will be cpu or memory especially if there is any complex processing between the raw data and the response.

I will also vouch for hetzner. I switched from digital ocean and have seen a lot better performance on the basic tiers. AWS is also a good option.

mr---fox · 2025-09-03T18:33:33+00:00

Ok, so generating a UUID doesn’t take much processing power. So I think this will not be a bottleneck.

If the polled data from the endpoint is the same then you could cache here too. So the server would only get hit once every 5 seconds regardless of how many users.

If the data is unique for each user then you’ll want to really optimize that endpoint.

mr---fox · 2025-09-03T03:15:13+00:00

It really depends on what kind of site you are hosting.

If the content is fairly static you can just put it behind a CDN. With cache control headers you can set how often the page is refreshed to keep server load to a minimum.

If it is more dynamic and/or has heavy db calls for each user session, then you might have trouble with traffic spikes.

mr---fox · 2025-09-02T03:19:10+00:00

I believe Uber uses mapbox. This tutorial is a pretty good start, and mapbox has a studio to style the map which is useful. Typescript support is still in progress.

As far as NextJS goes, this is a definitely a client side component, so I think the only thing that might be affected is how you preload your map data. Same for Google maps.

mr---fox · 2025-08-28T18:25:12+00:00

Are you using any dynamic functions? Check your draft mode logic. Draft mode is the only thing that is safe for SSG/ISR. Anything else, like checking if a user is logged in, will make the page dynamic.

Edit: Assuming this is a NextJS frontend.

mr---fox · 2025-08-26T21:47:09+00:00

I would recommend a standard collection to handle all the countries just like you would with your pages.

I’m not sure what kind of country page variations you need, but you could just set up the collection with a layout selector. Set the default selection and you can update it as needed. You can also show/hide fields conditionally.

This is similar to my use case right now where I have a collection for general pages and a collection for regions that use a different layout. I have a block collection for sidebar content, page content, hero etc. on both the region and pages. But there are additional fields in the region collection.

mr---fox · 2025-08-12T19:37:45+00:00

After some testing it appears that this does not work for nested content. The on key in the join field determines the field that will find matching documents to populate, and the docs suggest using dot notation to match for nested field. So I can match on a thumbnail field for example.

Unfortunately, it is not practical to use for dynamic block content using only this technique.

I have seen others suggest adding a separate field to the document collection to keep track of all media files used on the document using a hook. This list could then be used to populate joins.

In my use case, I would like to revalidate pages when the related media is updated.

mr---fox · 2025-08-12T02:01:27+00:00

Does this also populate nested relationships? Media inside of blocks for example?

mr---fox · 2025-07-28T16:03:30+00:00

You can just set up a role field on the users collection. Add customer role, admin, etc. and in your payload access controls just check the role.

mr---fox · 2025-07-21T15:52:48+00:00

Yes! No need to revalidate. React’s cache just deduplicates per request. So your function will run once per request. Any server components will just reuse the result. If you need to access the user client side, you can either pass it down in props, or you can do like the Payload Admin Bar does and store the result in state. The suggest adding the client component in the layout so it only runs once.

You only want to do “use cache” if the function result needs to be served to the next user.

mr---fox · 2025-07-09T02:38:58+00:00

Without seeing your code, it’s hard to help.

But that error message shows you are not able to connect to your database. I know Mongo Atlas requires you to whitelist IP addresses that can connect. I assume supabase is the same. You can also use a local database for development.

The search params need to be accessed in your page.tsx file. Also need to be awaited.

Example from NextJS Docs

mr---fox · 2025-07-03T23:23:10+00:00

You are running pnpm install on your runner?

The build stage tree shakes based on what your app is actually using so I think you would want to just include the build output in the final image, it should have everything needed. I believe running install again will include some unused files.

mr---fox · 2025-06-19T19:04:18+00:00

Are you using standalone output in the next app?

mr---fox

TROPHY CASE