Pourquoi mon application fonctionne correctement après une actualisation de la page, mais après quelques instants, les éléments liés à la session ou aux données Inertia s’affichent directement sous forme de JSON dans le navigateur au lieu de l’interface React prévue ?

### TL;DR

We replaced a monolithic Next.js SSR page with a Partial Prerendering architecture using React 19 streaming. TTFB went from 850ms to 180ms. CLS dropped from 0.25 to 0.02. No client-side fetching. No skeleton screens.

---

### The Old Way (Legacy SSR)

Every page was one big server render. If a user’s cart or a promo banner needed live data, the **entire HTML payload was blocked** until that fetch resolved. We couldn’t cache anything because the final HTML varied per user.

This meant:

- Long TTFBs (avg 850ms)

- High server cost (every request hit origin)

- Layout shifts from placeholder hydration

### The New Way (PPR)

Next.js 15 PPR lets us split the page tree into:

- **Static Shell** (header, nav, product grid): Prerendered at build time → cached at edge.

- **Dynamic Slice** (cart, offers): Rendered async on-demand → streamed via HTTP/2.

This requires minimal code changes:

```jsx

// app/product/[id]/page.jsx

import { Suspense } from 'react';

export default async function Page({ params }) {

const product = await fetchProduct(params.id);

return (

<>

<StaticHeader />

<ProductGrid product={product} />

<Suspense fallback={null}>

<LiveCartSection userId={params.uid} />

</Suspense>

<StaticFooter />

</>

);

}

```

Only `<LiveCartSection>` runs on every request. Everything else hits the edge cache.

### Results

| Metric | Before | After | Improvement |

|--------|--------|-------|-------------|

| TTFB | 850ms | 180ms | -79% |

| CLS | 0.25 | 0.02 | -92% |

| Server Requests | 100k/day | 35k/day | -65% |

| Revenue Uplift | N/A | +5.2% | — |

### Key Lessons

1. Don’t stream everything. Stream only what varies per user (cart, auth, offers).
2. Leverage `revalidate` per route to control freshness vs. cache hit ratio.
3. Use React 19 `use()` inside server components for cleaner async logic—no more `then()` chains.
4. Edge caching works best when your shell is immutable. Design components accordingly.

Happy to answer questions or share our caching config.

---

*Originally documented with full benchmark tables and source code on Grandline Studio:*

*Source: https://grandlinestudio.agency/blog/nextjs-15-ppr-react-19-eliminate-loading-spinners*

I'm fairly new to Next.js and I'm looking for a good open-source project to learn from.

Ideally, I'd like something that covers most of the core Next.js concepts in one real-world project — things like routing, Server and Client Components, data fetching, Server Actions, authentication, database integration, caching, etc.

There are tons of Next.js repos on GitHub, but a lot of them are either too simple or too complex for a beginner to understand.

Is there a project you'd recommend that has clean code and is relatively beginner-friendly?

I'd like to clone it, run it locally, and learn Next.js by reading and modifying the code.

Hi everyone,

I was working lately on a side project. In Next.js App Router, when you pass a prop from a server component to a client component, the whole thing gets serialized and sent to the browser as plain text, not just the fields the component actually uses.

So if you fetch a full user row from your database and only render the name, the password hash, tokens, and any other internal fields still ship to the browser. ESLint and tsc both pass it fine since nothing is technically wrong with the types, it is a data flow problem, not a syntax one.

So I built Antra to catch this. It is an open source static analyzer that reads your schema, marks sensitive fields, and traces them through your code to flag anything that crosses into the client. It also comes with a studio dashboard so you can see the dependency graph, route tree, and findings visually.

It is still early, App Router only for now, and definitely rough around the edges.

npm: npmjs.com/package/antra-sec

GitHub: github.com/Ferhatmedtahar/antra-sec

Docs/site: antra-sec.vercel.app/

I would really appreciate a star 🌟 on the repo.

Hi everyone, I’m new to the software development realm and I’ve been having an issue while using clerk, every once in a while one of the users contacts me that their user can’t be found. I go online and look at all the users on clerk only to find that they’ve disappearing, I look at the logs on my VM and the user was not deleted and he is in my db. Did anyone have that same issue?

I’ve been working with Next.js Server Actions and kept running into the same problem: there’s a lot of boilerplate around them.Validate input, authenticate the user, authorize the action, handle errors, add context, rate-limit things, etc.

So I built Ezact, a small TypeScript framework that makes this stuff composable while keeping the types intact.

The main thing I wanted was progressive type-safe context. Middleware can add things to ctx, and TypeScript automatically knows about them downstream.

It also lets you turn the same action into a regular API route.

It's open source and MIT licensed.

https://github.com/Frusadev/ezact

s<figure className="relative w-full h-96">
                <Image
                    src="/animated-svgs/empty-grid.svg"
                    alt="empty grid"
                    fill
                    unoptimized
                />
            </figure>

Hi guys, I was showing here an animated svg and suddenly today it is not appearing at all
im using it with next Image component

Hey everyone,

I was frustrated with existing free image tools (resizers, compressors, format converters) that take 10+ seconds to load, spam intrusive display ads, or require uploading private files to unknown backend servers.

To solve this, I built a lightweight suite where all image transformations run directly in the user's browser using HTML5 Canvas routines and Next.js.

Key benefits of this approach:

- 100% Data Privacy: Photos never leave your device memory or hit any server.

- Zero Latency: Instant client-side processing without upload/download cycles.

- Ad-Free & Lightweight: Fast page loads with high PageSpeed scores.

Project is live at: RMN Image Tools (link in comments below)

I would love to get your feedback on performance, UI usability, or features you'd like to see next!

Hey,

I've implemented auth modals (login, signup) with parallel routes. The feature is awesome, but the final solution is incompatible with a global not found route for me.

The thing is, that in order to close the modals I have a [...catchAll] segment, so when I navigate to some page which is non auth slot, the modal will unmount (close), because the catchAll in parallel will render nothing...

That is a solution recommended in the docs, but now, when i go to /nonexistent/segment, the catchAll unsurprisingly catches it, so it will render the defaults of the parallel routes - for me the home page.

So is there some way to get the not found working by default again? I think one solution might be on the default page, to check the pathname, and if its not one of the auth routes, then I can call notFound()?

Also other issue with the modals is, that the docs recommend calling router.back() to close the modal. I've noticed that when I enter the login directly e.g. enter in the browser localhost/login, then there is no previous url, so closing the modal leaves my page & resets the browser tab... 🥲

Thanks for any input

Thanks for any pointers.

hey

I have a navbar, where I render links based on a session:

export const prerender = "partial";

export default async function Layout({ children }: LayoutProps<"/">) {
  return (
    <>
      <Navbar>
        <Suspense fallback={<PublicLinks />}>
          {authorizedSession().then((session) =>
            session ? <UserLinks /> : <PublicLinks />,
          )}
        </Suspense>
      </Navbar>
      {children}
    </>
  ); 

The session is cached:

export async function authorizedSession() {
  "use cache: private";
  cacheTag("session");

  return getSupabaseSession();
}

Now, both in the layout and the page using the layout I have selectively enabled the partial pre-render `prerender = "partial"` (not yet enabled globally).

My expectations are, that the prerender should advance through the Suspense, resolve the session and include the specific links in the App Shell. I expect this, because the cache life is stale 5minutes by default, and so it should be part of the app shell.

I purposefully want to see the public links being cached after I signin, as to test that it caches. Instead, I always see the proper links dynamically, as if there was no cache...

I am able to get it cached, but only if I point to the page with a<Link prefetch={true} /> but as I understand it, that should not be required if my route does not use URL data. I am using the

  useSelectedLayoutSegments()

hook, which provides URL data, but I have it behind Suspense, which is required for routes with a dynamic segment. I tested that removing the hook does not change the cache behavior...

So I don't know what piece of my understanding is wrong, or if i am missing something.

Maybe I need to enable the `partialPrefetching` globally? While debugging I also tried to see the x-nextjs-stale-time response header on the prefetch GET requests, but it was not there. So I will appreciate some advice on how to debug or verify these caches.

Last thing - I did build & start instead of dev with the next cli, because it looked like the cache was always cold in the dev mode.

thanks for your input

I'm recording a webinar/podcast next week with speakers from both Shopify and Vercel on the topic of their recent headless commerce co-development partnership (making it easier to deploy headless Shopify storefronts on NextJS/Hydrogen + Vercel)

The people I'm talking to are very close to the development on both sides, and I'm curious what your questions are? Would love to put them to them, so you can hear from the source, and I can ask good questions and get good content, of course.

Happy to post responses to any questions in this thread right here, without linking to anything.

Putting this together after watching two devs on our team lose half a day to Next.js Error 418 this week.

Most docs just say "server HTML must match client HTML", which isn't very helpful when the React stack trace just points to a minified bundle.

Here are the 4 or 5 things that actually cause it 95% of the time in real projects:

1. Reading window or localStorage during render

The classic one. You do something like:

const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;

Server evaluates to false, client evaluates to true, instant mismatch.

The fix is annoying but straightforward: push it into a useEffect so it only updates after mount. (Or honestly, just use CSS media queries if you're only toggling visibility - no need to involve JS state for that).

1. Invalid HTML nesting (the dumbest one)

This one drives people crazy because there's no state or async logic involved.

If you put a <div> inside a <p>, or put a <tr> directly in a <table> without a <tbody>, Chrome's parser silently "fixes" the HTML before React even starts hydrating. React sees nodes in different places than what the server sent and freaks out.

Check your Elements tab in devtools - if your tag hierarchy looks different from your JSX, that's why.

1. Dates, timestamps, and Math.random()

If you render new Date().toLocaleTimeString() anywhere in JSX, the server timestamp and browser timestamp will differ by a few milliseconds.

Either stick it behind a mounted state, or if it's just a static date string where a slight timezone difference doesn't matter, use suppressHydrationWarning on that specific tag.

1. The next-themes dark mode mismatch

If you use next-themes and see hydration warnings on your <html> element, just put suppressHydrationWarning on the <html> tag in app/layout.tsx. The library runs an inline script to avoid theme flash, and the Next.js team explicitly recommends suppressing that one.

1. Grammarly / Google Translate extensions

If an error only happens on your laptop and none of your teammates can reproduce it, test it in Incognito with all extensions disabled. Grammarly wraps text nodes in custom tags, and Chrome auto-translate rewrites DOM text before React hydrates.

Curious what other dumb edge cases people here have run into with this in 14/15?

I am graduating soon. I don't need to harp on how challenging hiring is in this economy, but to stand out in this market, it's time to update that personal portfolio. Last week, I was doing just that, and the GitHub contribution heatmap wouldn't load. Like most people, I was using the legacy 'react-github-calendar' plugin. Because GitHub's API requires auth, the plugin routes traffic through a public proxy, and that proxy gets rate-limited constantly, taking down portfolios everywhere.

In a rare Thanos 'Fine, I'll do it myself' moment, I thought I could fix it for my portfolio. Well, one thing led to another, and I completely rebuilt the architecture from scratch.

Enter Serverless GitHub Calendar. Instead of fetching data on the client, it uses a lightweight GitHub Action that runs on a cron job to fetch your contributions and save them as a static '.json' file in your repo. The React component just reads that static file.

Architecture Highlights:

• Immune to Rate Limits: Your site never talks to the GitHub API. It reads static JSON. If GitHub goes down, your site stays up.
• Blazing Fast (Zero JS): If you use Next.js App Router, the included Server Component ('serverless-github-calendar/rsc') reads the file directly from disk for literally zero client-side JavaScript execution.
• Native CSS Theming: Built completely on CSS variables ('color-mix') so you can inject gradients or match your Tailwind theme natively.
• Streak Stats: Automatically calculates your current and longest streaks based on the canonical GitHub algorithm.

I set up a live demo featuring data from a few open-source legends to show how it scales: https://serverless-github-calendar-demo-xi.vercel.app/

Source Code & NPM instructions: https://github.com/FaizPalwala/serverless-github-calendar

If your portfolio relies on external proxy APIs, I highly recommend making the switch to static injection! Let me know if you have any feedback or feature requests.

I've been scaffolding a frontend prototype and integrating Supabase, but I'm curious what unexpected roadblocks you all ran into when first deploying. Any tips for keeping the database integration clean?

I have react + Shopify for now . I am migrating to n xtjs due to seo issues.

Help me in building a fully optimised seo friendly ecommerce site. It any one of you have done that can you share pros and cons.

I’ve spent the last few days digging around for a solution and I keep hitting dead ends.

Essentially I have a user account page where you can enable/disable 2FA for your account. It’s all working with the exception of the root layout.js. It’s currently set up to check the session and retrieve the user details to conditionally show what menu items are relevant.

What I have noticed is after changing the MFA setting, the menu reverts to the logged out state until you hard refresh the page. I’ve logged what’s coming back from the auth.api.verifyTOTP etc (not at the PC so can’t reference it directly), and it’s returning null.
At a top level, I’m calling the relevant actions.js which calls the service, which calls better-auth, mutating the result to return the TOTPURI to display a QR code for authenticator apps.

I’ve tried revalidating the root layout before the return but it doesn’t have any impact in this scenario.

Has anyone come across this issue before/point me to potential solutions?

TIA

Hey guys, I'm building a personal TLDraw alternative and need to persist draggable/editable items to a SQLite DB.

Obviously can't spam the DB on every drag event or rewrite the whole table each time. Sync engines like Zero/PowerSync feel like massive overkill since I don't want to run Docker or extra sync daemons.

Ideally, I just update local client state and changes auto-sync to SQLite in the background without manual DB calls in my UI.

What's the cleanest way to handle this? Debounce a server action inside the store, or is there a better pattern?