Why Do I See Pre-Rendered HTML in Source Code When Using 'use client' in Next.js? #67916

sahandghorbani · 2024-07-18T16:20:51Z

sahandghorbani
Jul 18, 2024

I'm working on a Next.js application and have some confusion regarding pre-rendering and client-side rendering. I've been using the 'use client' directive at the top of my components to ensure they are rendered on the client side. However, when I inspect the source code in my browser, I see a lot of pre-rendered HTML. Here is an example of what I see:

<!DOCTYPE html>
<html id="__next_error__">
  <head>
    <meta charSet="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-6ccd546df7026715.js"/>
    <script src="/_next/static/chunks/fd9d1056-50156f73129e00b3.js" async=""></script>
    <script src="/_next/static/chunks/7023-cc046719c82ee6d4.js" async=""></script>
    <script src="/_next/static/chunks/main-app-55bbd77d79f9187f.js" async=""></script>
    <meta name="robots" content="noindex"/>
    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
    <script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script>
  </head>
  <body>
    <script src="/_next/static/chunks/webpack-6ccd546df7026715.js" async=""></script>
    <!-- More pre-rendered code here -->
  </body>
</html>

My understanding was that with 'use client', the components would only render on the client side, so I didn't expect to see so much pre-rendered content in the initial HTML.

Could someone please explain why this is happening? How does Next.js handle pre-rendering and client-side rendering in this context? Does using 'use client' still involve some form of server-side pre-rendering, and if so, what are the benefits?

Thanks in advance for your insights!

Answered by icyJoseph

Jul 18, 2024

My understanding was that with 'use client', the components would only render on the client side, so I didn't expect to see so much pre-rendered content in the initial HTML.

That's wrong. Many tech-influencers, have heavily miscommunicated this.

Client Components, are the traditional components, so to speak, and these are rendered during any type of SSR pass.

reactwg/server-components#4

The special behavior, rather, is for Server Components, which do not send their JavaScript to the client.

If want to defer rendering to the client, there are other techniques such as:

View full answer

icyJoseph · 2024-07-18T16:40:08Z

icyJoseph
Jul 18, 2024
Maintainer

My understanding was that with 'use client', the components would only render on the client side, so I didn't expect to see so much pre-rendered content in the initial HTML.

That's wrong. Many tech-influencers, have heavily miscommunicated this.

Client Components, are the traditional components, so to speak, and these are rendered during any type of SSR pass.

Why do Client Components get SSR'd to HTML? reactwg/server-components#4

The special behavior, rather, is for Server Components, which do not send their JavaScript to the client.

If want to defer rendering to the client, there are other techniques such as:

That they get rendered is also important, for other matters, see for example: #67878 (comment)

7 replies

icyJoseph Jul 18, 2024
Maintainer

Yes. Unless of course, you opt out from that, by means such as those I link above.

Though you are also, seeing a server side rendering error.

sahandghorbani Jul 18, 2024
Author

yean im gonna fix the error but why in documents and toturials everybody say use client mean you are rendering everything in client side

sahandghorbani Jul 18, 2024
Author

at the moment if i dont handle anything and keep coding by adding 'use client' at top of each page , it means im rendering ssr or ssg or something like that ?

sahandghorbani Jul 18, 2024
Author

i remember i used the window object in my project since there was an isssue in nextjs github about hadling the queryparams

import { useRouter } from 'next/navigation';

interface QueryParams {
  [key: string]: string | number;
}
const useQueryParams = () => {
  const router = useRouter();
  const updateQueryParams = (params: QueryParams) => {
    const searchParams = new URLSearchParams(window.location.search);
    for (const key in params) {
      const value = params[key];
      if (value) {
        searchParams.set(key, value as string);
      } else {
        searchParams.delete(key);
      }
    }

    const newSearch = searchParams.toString();
    const newURL = `${window.location.pathname}${newSearch ? `?${newSearch}` : ''}`;
    router.push(newURL, { scroll: false });
  };

  return updateQueryParams;
};

export default useQueryParams;

icyJoseph Jul 18, 2024
Maintainer

That hook should be fine, unless you call the function it returns during render.

Anything else you might be wondering about?

Why Do I See Pre-Rendered HTML in Source Code When Using 'use client' in Next.js? #67916

Uh oh!

sahandghorbani Jul 18, 2024

Replies: 1 comment · 7 replies

Uh oh!

Uh oh!

icyJoseph Jul 18, 2024 Maintainer

Uh oh!

Uh oh!

icyJoseph Jul 18, 2024 Maintainer

Uh oh!

sahandghorbani Jul 18, 2024 Author

Uh oh!

Uh oh!

sahandghorbani Jul 18, 2024 Author

Uh oh!

sahandghorbani Jul 18, 2024 Author

Uh oh!

icyJoseph Jul 18, 2024 Maintainer

sahandghorbani
Jul 18, 2024

Replies: 1 comment 7 replies

icyJoseph
Jul 18, 2024
Maintainer

icyJoseph Jul 18, 2024
Maintainer

sahandghorbani Jul 18, 2024
Author

sahandghorbani Jul 18, 2024
Author

sahandghorbani Jul 18, 2024
Author

icyJoseph Jul 18, 2024
Maintainer